本文共 851 字，大约阅读时间需要 2 分钟。

Class 与 Style 绑定

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用 v-bind 处理它们：我们只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

绑定 HTML Class

尽管可以用 Mustache 标签绑定 class，比如 `{% raw %}class="{

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存：

data: {  isA: true,  isB: false}

当 isA 和 isB 变化时，class 列表将相应地更新。

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

data: {  classA: 'class-a',  classB: 'class-b'}

渲染为：

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：

data: {  activeColor: 'red',  fontSize: 30}

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

   
data: {  styleObject: {    color: 'red',    fontSize: '13px'  }}

数组语法

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

转载地址：http://zdlab.baihongyu.com/