数据绑定一个常见需求是操作元素的class列表和它的内联样式。因为他们都是属性,我们可以用v-bind来处理它们:只需要计算出表达式最终的字符串。不过字符串拼接麻烦又易错。因此,在v-bind用于class与style时,vue.js专门增强了它。表达式的结果类型除了字符串外,还可以是对象或数组。
1.绑定HTML Class
对象语法
我们可以传给v-bind:class一个对象,以动态的切换class.
我们也可以在对象中传入更多属性用来动态切换多个class。此外v-bind:class指令可以与普通的class属性共存。
2.绑定内联样式
对象语法
v-bind:style的对象语法十分直观--看着非常像css。其实它是一个javascript对象。css属性名可以用驼峰式(camelCase)或(配合引号的)短横分割命名(kebab-case);
数组语法
v-bind:style的数组语法可以将多个样式对象应用到一个元素上。
自动添加前缀
当v-bind:style使用需要特定前缀的css属性时,如transform,vue.js会自动侦测并添加相应的前缀。