Vue.js教程_4

操作元素的class列表和内联样式的数据绑定：使用v-bind和style与class结合。v-bind也可与操作元素的其他属性结合。

1. 绑定class

1. 对象语法：
   • 并且data:{ isActive: ture}
   • 并且data:{ isActive: true, hasError: false}渲染结果为：
   • 和data: {classObject: {active: true, 'text-danger': false}}
2. 数组语法：
   • 和data: {activeClass: 'active', errorClass: 'text-danger'}渲染为：

2. 绑定内联样式

1. 对象语法
   • 和data: {activeColor: 'red',fontSize: 30}
   • 和data: {styleObject: {color: 'red', fontSize: '13px'}}
2. 数组语法
3. 自动添加前缀
   v-bind:style使用需要添加浏览器引擎前缀的CSS属性时，如：transform，Vue.js会自动侦测并添加相应的前缀。
4. 多重值
   style绑定中的属性提供一个包含多个值的数值，常用于提供多个带前缀的值。
   ,只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。