## class与style绑定 Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 * 我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:其中isActive为布尔类型数据。 ~~~ <div v-bind:class="{ active: isActive }"></div> //我们也可以在对象中传入更多属性用来动态切换多个 class ,可以用三目判断 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> ~~~ * 直接绑定数据里的一个对象 ~~~ //直接传入对象类型，可以是计算属性返回的对象类型 <div id="app"> <div v-bind:class="classObject"></div> </div> new Vue({ el: '#app', data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } } } }) ~~~ * 一个数组传给 v-bind:class ~~~ <div v-bind:class="[activeClass, errorClass]"></div> //传入的数组中的都是边框 注意 data:{ activeClass:'active', errorClass:'text-danger' } //我们还可以使用三元表达式来切换列表中的 class ： <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div> ~~~ * style(内联样式) 我们可以在 v-bind:style 直接设置样式： ~~~ <div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div> </div> //也可以直接绑定到一个样式对象，让模板更清晰 <div v-bind:style="styleObject">菜鸟教程</div> data: { styleObject: { color: 'green', fontSize: '30px' } } //可以使用数组将多个样式对象应用到一个元素上 <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div> baseStyles: { color: 'green', fontSize: '30px' }, overridingStyles: { 'font-weight': 'bold' } ~~~