目录

  1. 样式绑定概念
  2. 绑定HTML的Class属性
  3. 绑定HTML的Style属性
  4. 绑定内联样式

1. 样式绑定概念

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

2. 绑定HTML的Class属性

2.1 v-bind:class

2.2 动态切换多个Class

2.3 v-bind:class 绑定对象

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

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

3. 绑定HTML的Style属性

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

4. 绑定内联样式

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