vue 动态class 使用方法

Vue提供了多种方式来动态地使用class。可以使用对象语法、数组语法和计算属性来实现动态class。

1. 对象语法：使用v-bind:class指令可以动态地切换class。可以给:class绑定一个对象，对象的属性作为class名称，属性值为一个布尔值，当布尔值为true时，对应的class将被应用。
例如：

<div id="app">
  <div :class="{'active': isActive}"></div>
</div>
<script>
var app = new Vue({ 
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

最终渲染结果：

<div class="active"></div>

2. 数组语法：可以通过数组来应用多个class。使用v-bind:class指令，将一个包含class名称的数组绑定到:class上，数组中的每个元素代表一个class。
例如：

<div id="app">
  <div class="static" :class="['active', 'error']"></div>
</div>
<script>
var app = new Vue({ 
  el: '#app',
  data: {
    isActive: true,
    isError: false
  }
})
</script>

最终渲染结果：

<div class="static active"></div>

3. 计算属性：可以使用计算属性来返回要应用的class。在Vue实例中定义一个计算属性，根据一些条件来返回一个class名称，然后将计算属性绑定到:class上。
例如：

<script>
Vue.component('my-component', {
  template: '<p class="article">一些文本</p>'
})
</script>
<div id="app">
  <my-component :class="activeClass"></my-component>
</div>
<script>
var app = new Vue({ 
  el: '#app',
  data: {
    isActive: true
  },
  computed: {
    activeClass: function() {
      return this.isActive ? 'active' : '';
    }
  }
})
</script>

在这个例子中，根据isActive属性的值，计算属性activeClass返回的class名称将被应用到my-component组件的根元素上。