第四章 v-bind 及 class 与 style 绑定

1、动态绑定 class 的方法之对象语法：
我们可以传给 v-bind:class 一个对象，以动态地切换 class：

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

你也可以在对象中传入更多属性来动态切换多个 class，v-bind:class 指令也可以与普通的 class 属性共存，

<div class="static" v-bind:class="{ active: isActive,error: isError }"></div>

我们也可以在这里绑定一个返回对象的计算属性，这是一个常用且强大的模式：

<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'
    }
  }
}

2、动态绑定 class 的方法之数组语法：
当需要使用多个 class 时，我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

如果想根据条件切换列表中的 class，可以用三元表达式或者在数组语法中使用对象语法：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>  // 三元表达式

<div v-bind:class="[{ active: isActive }, errorClass]"></div>  // 数组中的对象语法

当然也可以绑定一个计算属性：

<p :class="classes"></p>

data:{
    size:'large',
    disabled:true
},
computed:{
    classes:function(){
        return[
            'btn',
            {
                ['btn-' + this.size]:this.size !== '',
                ['btn-disabled']:this.disabled
            }
        ]
    }
}

3、当在一个自定义组件上使用 class 或 :class 属性时，这些类将被添加到该组件的根元素上面，这个元素上已经存在的类不会被覆盖，当要给具体的子元素设置类名时，应当使用组件的 props 来传递。

4、使用 v-bind:style（即 :style）可以给元素绑定内联样式，方法与 :class 类似，也有对象语法和数组语法，css 属性名称要使用驼峰命名或短横线分隔命名（记得用单引号括起来）。

第四章 v-bind 及 class 与 style 绑定

推荐阅读更多精彩内容