Vue动态绑定class的几种常用方式小结

在Vue中如何动态绑定class是一个常见问题，本篇文章将总结几种常用的方式，包括对象语法、数组语法、计算属性以及使用第三方插件来实现。同时提供具体的示例代码帮助理解。

对象语法

对象语法是动态绑定class的最常见方式之一。在Vue中可以直接使用v-bind:class指令，并在该指令对应的值中使用对象语法，如下所示：

<div v-bind:class="{ active: isActive }"></div>

在上面的代码中，active是一个class名称，isActive是一个在Vue实例中定义的一个data属性，如果isActive的值为true，则该元素将会附带active类。

同时，在对象语法中还可以使用多个属性/值对，如下所示：

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

在上面的代码中，如果isActive的值为true，则元素会附带active类；如果hasError的值为true，则元素会附带text-danger类。

数组语法

数组语法是另一种动态绑定class的方式。在该语法中，可以定义一个class名称数组，如下所示：

<div v-bind:class="[activeClass, errorClass]"></div>

在上述代码中，activeClass和errorClass均是在Vue实例中定义的data属性，它们的值分别为'active'和'error'。如果这两个属性都为true，则该元素会附带'active error'这两个class。

同时，在数组语法中还可以使用三元表达式定义类名是否出现，如下所示：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

在上面的代码中，如果isActive的值为true，则该元素附带activeClass；如果isActive的值为false，则不会附带任何class。

计算属性

计算属性是一种更加灵活的动态绑定class的方式。在该方式中，可以根据任何条件定义class名称，具体实现如下：

<div v-bind:class="classObj"></div>

在上面的代码中，classObj是一个在Vue实例中定义的计算属性，其返回的是一个包含多个属性/值对的对象。

代码示例:

var vm = new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: null
  },
  computed: {
    classObj: function () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal'
      }
    }
  }
})

在上面的代码中，classObj计算属性根据isActive及error属性的值返回一个含有active及text-danger两个属性/值对的对象。如果isActive的值为true且error为null，则元素附带active类；如果error的值不为null且error.type的值为'fatal'，则元素附带text-danger类。

使用第三方插件

如果以上方式仍然不能满足你的需求，那么可以考虑使用第三方插件来实现动态绑定class。比如element-ui中的el-carousel组件，它允许你根据不同的状态动态绑定class。

代码示例：

<el-carousel v-bind:class="{
    'is-vertical': vertical,
    'el-carousel--card': card,
    'el-carousel--card-atmosphere': card && atmospheric && !gradient,
    'el-carousel--card-gradient-atmosphere': card && atmospheric && gradient
  }"
  :height="height"
  :initial-index="initialIndex"
  :trigger="trigger"
  :autoplay="autoplay"
  :interval="interval">
  ...
</el-carousel>

在上述代码中，el-carousel组件使用v-bind:class指令动态绑定class，对象中的属性/值对根据不同的参数设置映射为不同的class名称，从而实现不同状态下的UI显示效果。