Style绑定

字符串

由于v-bind指令认为双引号中的内容是JavaScript表达式，所以需要再使用一对单引号表示字符串。

动态增删改Style——手动处理字符串（拼接、截取）实现。

（1）字符串字面量

（2）值为字符串的组件属性

（3）返回字符串的计算属性

（4）其它值为字符串的JS表达式

字符串拼接（字面量）

字符串拼接（字面量+组件属性）

三元表达式（字面量）

三元表达式（字面量+组件属性）

……

JS对象

注意所用对象为键值对格式，value为字符串类型。key含有连字符时（kebab-cased）必须放在单引号中，或者使用小驼峰格式（camelCase）。

动态增删Style——增删key-value实现，动态修改Style——修改value实现。

（1）JS对象字面量

（2）指向JS对象的组件属性

举一反三

对象的value也可以是字符串类型的组件属性或计算属性。

如下做法不可行，请使用“（3）返回JS对象的计算属性”。

此外，无法使用含连字符的组件属性。

（3）返回JS对象的计算属性

JS数组

数组成员为如上提到的可用在:style的东西，可以混用，甚至可以数组套数组。

（1）JS数组字面量

（2）指向JS数组的组件属性

拓展知识

自动前缀

当你在 :style 中使用了需要浏览器特殊前缀的 CSS 属性时，Vue 会自动为他们加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器不支持某个属性，那么将测试加上各个浏览器特殊前缀，以找到哪一个是被支持的。

样式多值

你可以对一个样式属性提供多个 (不同前缀的) 值，举例来说：

数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为 display: flex。

Class绑定

HTML标椎语法，为div添加一个名为“border”的Class。

同时使用了HTML标椎语法与Attribute绑定语法，两者可以共存。

字符串

由于v-bind指令认为双引号中的内容是JavaScript表达式，所以需要再使用一对单引号表示字符串。

动态增删Class——手动处理字符串（拼接、截取）实现。

（1）字符串字面量

（2）值为字符串的组件属性

（3）返回字符串的计算属性

（4）其它值为字符串的JS表达式

字符串拼接（字面量）

字符串拼接（字面量+组件属性）

三元表达式（字面量）

三元表达式（字面量+组件属性）

……

JS对象

注意所用对象为键值对格式，value为Boolean类型。key含有连字符时必须放在单引号中。

动态增删Class——修改value实现。

（1）JS对象字面量

（2）指向JS对象的组件属性

举一反三

对象的value也可以是Boolean类型的组件属性或计算属性。

如下做法不可行。

此外，无法使用含连字符的组件属性。

（3）返回JS对象的计算属性

JS数组

数组成员为如上提到的可用在:class的东西，可以混用。甚至可以数组套数组。

（1）JS数组字面量

（2）指向JS数组的组件属性