五、v-bind及class与style绑定

我们已经介绍了指令v-bind 的基本用法以及它的语法糖，它的主要用法是动态更新html元素上的属性；

1、绑定class的几种方式

<div :class=”{’ active ’: isActive }”></div>

对象中也可以传入多个属性，来动态切换class 。另外，:class 可以与普通class 共存，如：

<div class="static": class="{'active': i sActive,'error':isError }"＞</div>

当:class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用data 或computed ，如：

<div : class= ” classes ” ></ div>

var app =new Vue({

el :’#app ’,

data : {

} ,

isActive : true ,

error : null

computed: {

classes : function () {

return {

active : this . isActive && !this.error,

’ text-fail ’: this.error && this.error.type === ’ fail ’

}

}

})

多个class时，也可以是数组，<div :class ＝ "[activeCls , errorCls]" ></div>

三目运算：<div : class = ” [ isActive ? activeCls :”, errorCls ] ” ></ div>

class 有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法：<div : class =” [{ ’ active ’: isActive } , errorCls ) ” ></ div>

2、绑定内联样式

使用v-bind:style （即： style ） 可以给元素绑定内联样式，方法与： class 类似，也有对象语法和数组语法，看起来很像直接在元素上写CSS:

<div :style＝"{’ color ’: color, ’ fontSize ’ : fontSize ＋’ px ’}">文本</div>

大多数情况下， 直接写一长串的样式不便于阅读和维护，所以一般写在data 或computed 里;另外， 使用： style 时， Vue .js 会自动给特殊的css 属性名称增加前缀， 比如transform 。