基于 Laravel 的 Vue.js 中文学习教程 —— Class 与 Style 绑定

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

绑定HTML Class

尽管你可以使用Mustache标签绑定到class，例如class="{{ className }}"，不过并不推荐将这种风格和v-bind:class混在一起。两者只能任选其一。

对象语法

我们传递一个对象到v-bind:class来动态切换class，注意v-bind:class指令可以和原生的class属性共存：

HTML代码：

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

JS代码：

data: {
    isA: true,
    isB: false
}

渲染结果如下：

<div class="static class-a"></div>

当isA和isB改变的时候，class列表也会相应更新，例如，如果isB变成true，class列表会变成"static class-a class-b"。

你可以可以直接绑定data数据中的对象：

HTML代码：

<div v-bind:class="classObject"></div>

JS代码：

data: {
    classObject: {
        'class-a': true,
        'class-b': false
    }
}

这种方式和上面的结果一样，你可能已经注意到，还可以绑定到一个计算属性返回的对象，这是一个通用且功能强大的模式。

数组语法

我们可以传递数组到v-bind:class来应用class列表：

HTML代码：

<div v-bind:class="[classA, classB]">

JS代码：

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

渲染结果如下：

<div class="class-a class-b"></div>

如果你还想按条件切换class，可以通过一个三元运算表达式来实现：

<div v-bind:class="[classA, isB ? classB : '']">

这样，classA会一直出现，而classB则只有在isB为true的时候才显示。

不过，如果你有多个条件类时，上述写法显得有些累赘，在Vue 1.0.19+版本中，还可以在数组语法中使用对象语法：

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

绑定内联样式

对象语法

用于v-bind:style的对象语法非常直截了当 —— 和CSS看上去基本一样，除了这是一个JavaScript对象之外。CSS属性名可以使用驼峰式命名也可以是短横线分隔：

HTML代码：

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

JS代码：

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

通常，绑定样式对象是一个更好的主意，因为这样代码会更清晰：

HTML代码：

<div v-bind:style="styleObject"></div>

JS代码：

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

对象语法通常和计算属性一起结合使用返回对象。

数组语法

v-bind:style的数组语法允许你应用多个样式对象到同一个元素：

<div v-bind:style="[styleObjectA, styleObjectB]">

自动添加前缀

当你在v-bind:style中使用一个需要厂商（vendor）前缀的CSS属性时，例如transform，Vue.js会自动侦测并为其添加相应的前缀。