vue.js v-bind绑定class 官方文档提炼

v-bind绑定class 官方文档提炼

v-bind绑定class有两种语法，1.数组语法2.对象语法；其中 数组语法是包含对象语法的

对象语法

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

双引号里面是一个对象 属性名即预备的css类 其值为真值 则应用这个类

同时 它(classObject)也可也传一个返回如对象语法格式的返回值的函数 //注意：它是在computed中定义

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

关于这个函数内部变量改变后动态执行classObject 如下解释

• computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

数组语法

数组语法中 传递一个数组

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

数组中的值默认为真 如果你想让某些属性为假 可以传递如同对象语法中的对象

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

里面的对象按照对象语法解析，所以 数组语法是可以包含对象语法的

值得一提的是 ，v-bind:class 指令也可以与普通的 class 属性共存。

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

这个static类与后面动态类共存。

---