Vue Class与Style绑定

操做元素的class列表和内联样式是数据绑定的一个常见需求。由于它们都是属性，因此咱们能够用 v-bind 处理它们：只须要经过表达式计算出字符串结果便可。

表达式结果的类型除了字符串以外，还能够是对象或数组。

绑定HTML的class

对象语法

咱们能够传给 v-bind:class 一个对象，以动态地切换 class

上图的语法表示 Font 这个 class 存在与否将取决于数据属性 isFont 的值。

固然也能够传入更多属性来动态切换多个class

此外，v-bind:class 指令也能够与普通的 class 属性共存。

固然绑定的数据也没必要定义在模板里，这样也是能够的，渲染的结果和上面同样

数组语法

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

固然若是想根据条件切换列表中的 class，能够用三元表达式：

也能够这样<div class="background" v-bind:class="[isActive?Font:"",col]">测试文字1</div>

这样写将始终添加 col，可是只有在 isActive 是 truthy 时才添加 Font。

不过，当有多个条件 class 时这样写有些繁琐。因此在数组语法中也可使用对象语法：

<div class="background" v-bind:class="[{Font:isActive},col]">测试文字1</div>
复制代码

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观——看着很是像 CSS，但实际上是一个 JavaScript 对象。

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

数组语法

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

自动添加前缀

当 v-bind:style`` 使用须要添加浏览器引擎前缀的 CSS 属性时，如 transform，则 Vue.js 会自动侦测并添加相应的前缀。

多重性

你能够为 style 绑定中的属性提供一个包含多个值的数组，经常使用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
复制代码

---

P_P