Vue 中的样式绑定

一）样式绑定概念

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

二）通过对象语法绑定 HTML 的 Class 属性

4.1 我们可以传给 v-bing:class一个对象,以 动 态 地 切 换 class

上面的语法表示 red 这个 class 存在与否将取决于数据属性 classA 的 布尔值。

1.2  我们也可以在对象中传入多个属性来动态切换多个Class。

2.3  传递 v-bind:class 一个对象,  完成多个Class的切换。

2.4 通过邦定一个返回对象的计算属性。

通过对象的计算属性返回一个class

通过计算属性返回多个class

三）  通过数组语法绑定HTML 的Class 属性

我们可以通过把一个数组传给v-bind:class,用来应用一个class列表

四）  绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

试例：

以上便是今天的总结。