v-bind 及 class 与 style 绑定

1. 绑定 class 的集中方式

1.1. 对象语法

给class设置一个对象，可以动态切换class。例如：

var app = new Vue({

el: '#app',

data: {

isActive: true

}

});

示例中，类名active依赖数据isActive，当isActive的值为true时，div标签会拥有active类，否者没有。最终渲染效果如下：

对象中也可以传入过个属性，可以动态切换class。此外，:class可以与普通class共存，例如：

var app = new Vue({

el: '#app',

data: {

isActive: true,

isError: false

}

});

当:class的表达式过长或者逻辑复杂时，还可以绑定一个计算属性，一般当条件多于两个小时，都可以使用data或computed，例如计算属性：

var app = new Vue({

el: '#app',

data: {

isActive: true,

error: null

},

computed: {

classes: function() {

return {

active: this.isActive && !this.error,

'text-fial': this.error && this.error.type === 'fial'

}

}

}

});

除了计算属性，还可以绑定一个Object类型的数据，或者使用类似计算属性的methods。

1.2. 数组语法

当你要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表：

var app = new Vue({

el: '#app',

data: {

isActive: true,

error: null

},

computed: {

classes: function() {

return {

activeCls: 'active',

errorCls: 'error'

}

}

}

});

渲染结果为：

还可以使用三元表达式来切换class，例如：

var app = new Vue({

el: '#app',

data: {

isActive: true,

error: null

},

computed: {

classes: function() {

return {

isActive: true,

errorCls: 'error',

activeCls: 'active'

}

}

}

});

当然这样写也比较麻烦，可以在数组语法中使用对象语法：

var app = new Vue({

el: "#app",

data: {

isActive: true,

error: null

},

computed: {

classes: function() {

return {

isActive: true,

errorCls: "error"

};

}

}

});

使用计算属性可以给元素动态的设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能地优先使用计算属性。

1.3. 组件上使用

如果直接在自定义组件上使用class或:class，样式规则会直接应用到这个组件的根元素上，例如：

Vue.component("my-component", {

template: '

一些文本

'

});

var app = new Vue({

el: "#app",

data: {

isActive: true,

error: null

},

computed: {

classes: function() {

return {

isActive: true

};

}

}

});

最终渲染结果是：

一些文本

这种用法仅仅适合自定义组件的最外层是一个根元素，否者无效，当不满足这种条件还需要给子元素设置类名，那就需要借助于props来传递。

这种方式后续会讲解，此处不做详述。

1.4. 绑定内联样式

使用v-bind:style即:style可以给元素绑定内联样式，方法与:class类似，也有对象和数组语法。例如：

Vue.component("my-component", {

template: '

一些文本

'

});

var app = new Vue({

el: "#app",

data: {

color: 'red',

fontSize: 14

}

});

CSS属性名称使用驼峰命名(camelCase)或短横线分隔命名(kebab-case)，渲染后的结果为：

很多时候样式都比较多，不方便维护，所以一般写在data或者computed里，以data为例改写示例：

var app = new Vue({

el: "#app",

data: {

styles: {

color: 'red',

fontSize: 14 + 'px'

}

}

});

应用多个样式对象时，可以使用数组语法：

在实际业务中，:style的数组语法并不常用，往往可以将样式写在一个对象里；比较常用的应当是计算属性。

2. 章节总结

本章主要讲了类名和样式的绑定，以及一个常用的绑定方式。在后面的内容中，将继续穿插使用这些特性。

当你的才华撑不起自己的野心，那就努力学习吧！