vue toggle makes a click to switch classes (explanation with examples)

Now I will share with you an example of using vue toggle to switch classes by clicking. Has very good reference value. I hope to be helpful.

The example is as follows:

<template>
  <p>
    <span :class="{&#39;bg-primary text-danger&#39;:isA,&#39;bg-success text-white&#39;:!isA}" @click="toggle()">AAAAA</span>
  </p>
</template>
<script>
  export default {
    name: &#39;hello&#39;,
    data () {
      return {
        isA: false
      }
    },
    methods:{
      toggle:function () {
        this.isA=!this.isA
      }
    }
  }
</script>
<style scoped>
  @import "../../../src/assets/plugin/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.css";
</style>

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

Related articles:

vue How to keep the scroll bar of the div at the bottom after each rendering of the page

In vue, implement requesting data first and then rendering dom sharing

Solve the problem that the DOM operation of the vue page does not take effect

The above is the detailed content of vue toggle makes a click to switch classes (explanation with examples). For more information, please follow other related articles on the PHP Chinese website!