v-bind用于class和style时，Vue做了增强，表达式结果除了字符串之外，还可以是对象或数组。 ### 绑定HTMLClass #### 对象语法 ``` <div v-bind:class="{ active: isActive }"></div> ``` isActive是实例中的数据。也可以与普通的class属性共存。 ``` <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> ``` 绑定的数据对象不必内联定义在模板里，可以如下定义： ``` <div v-bind:class="classObject"></div> data: { classObject: { active: true, 'text-danger': false } } ``` 还可以绑定一个返回对象的计算属性： ``` data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } } ``` #### 数组语法 ``` <div v-bind:class="[activeClass, errorClass]"></div> ``` ``` data: { activeClass: 'active', errorClass: 'text-danger' } ``` 渲染结果： ``` <div class="active text-danger"></div> ``` 三元表达式： ``` <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div> ``` 这样写将始终添加`errorClass`，但是只有在`isActive`是 truthy[\[1\]](https://cn.vuejs.org/v2/guide/class-and-style.html#footnote-1)时才添加`activeClass`。 不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法： ``` <div v-bind:class="[{ active: isActive }, errorClass]"></div> ``` #### 用在组件上 ``` Vue.component('my-component', { template: '<p class="foo bar">Hi</p>' }) ``` 在一个自定义组件上使用class属性时，这些class将会被添加到该组件的根元素上面。这个元素上已经存在的class不会被覆盖。 以上实例在使用的时候添加另外的class ``` <my-component class="baz boo"></my-component> ``` 则最终的渲染效果为： ``` <p class="foo bar baz boo">Hi</p> ``` 对于带绑定class也同样适用： ``` <my-component v-bind:class="{ active: isActive }"></my-component> ``` 当 isActive 为 truthy[1] 时，HTML 将被渲染成为： ``` <p class="foo bar active">Hi</p> ``` ### 绑定内联样式 v-bind:style 直观看像CSS， 其实是一个JavaScript对象，CSS属性名可以用驼峰式或短线分隔命名： ``` <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: { activeColor: 'red', fontSize: 30 } ``` 也可以绑定一个样式对象： ``` <div v-bind:style="styleObject"></div> data: { styleObject: { color: 'red', fontSize: '13px' } } ``` #### 数组语法 可以绑定多个样式对象到同一个元素。 ``` <div v-bind:style="[baseStyles, overridingStyles]"></div> ``` #### 自动添加前缀 当`v-bind:style`使用需要添加[浏览器引擎前缀](https://developer.mozilla.org/zh-CN/docs/Glossary/Vendor_Prefix)的 CSS 属性时，如`transform`，Vue.js 会自动侦测并添加相应的前缀。 #### 多重值 从 2.3.0 起你可以为`style`绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如： ``` <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> ```