class 与 style绑定

一. class绑定

1. 对象语法

1.1 传给v-bind:class 一个对象，以动态的切换class

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

表示 active 这个 class 存在与否将取决于数据属性 isActive 的真实性,'text-danger’同理

1.2 绑定的数据对象不必内联定义在模板里

下述渲染的结果和上面1.1一样

<div v-bind:class="classObject"></div>
data: {
    classObject: {
        active: true,
        'text-danger': false
    }
}

1.3 绑定一个返回对象的计算属性

<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. 数组语法

2.1 把一个数组传给 v-bind:class，以应用一个 class 列表

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

渲染为：

<div class="active text-danger"></div>

2.2 在数组语法中也可以使用对象语法：

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

二. style绑定

1. 对象语法

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case)，记得用单引号括起来来命名

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
    activeColor: 'red',
    fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>
data: {
    styleObject: {
        color: 'red',
        fontSize: '13px'
    }
}

2. 数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>