vue爬坑之路5----class与style的绑定
绑定HTML Class
-
对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换class。
<div v-bind:class="{active:isActive}"></div>
上面的语法表示class active 的更新将取决于数据属性 isActive 是否为真值。
我们也可以在对象中传入更多属性用来动态切换多个class。此外，v-bind:class指令可以与普通的class属性共存。
如：<div class='static' v-bind:class="{ active : isActive,'text-danger':hasError }">
</div>
如下data：
data:{
isActive:true,
hasError:false
}
渲染为：
<div class='static active'></div>
当 isActive 或者 hasError 变化时，class列表将相应地更新。例如，如果 hasError 的值为 true ，class列表将变为"static active text-danger"。
也可以直接绑定数据里的一个对象:
<div v-bind:class='classObject'></div>
data:{
classObject:{
active:true,
'text-danger':false
}
}
渲染的结果和上面的一样。我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：
<div v-bind:class='classObject'></div>
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 ,以应用一个class列表：
<div v-bind:class='[activeClass,errorClass]">
data：{
activeClass:'active',
errorClass:'text-danger'
}
渲染为：
<div class='active text-danger'></div>
-
用在组件上
当你在一个定制的组件上用到 class 属性的时候，这些类将被添加到根元素上面，这个元素上已经存在的类不会被覆盖。
例如，如果你声明了这个组件：
Vue.compoent('my-component',{
template:'<p class='foo bar '>Hi</p>'
})
然后在使用它的时候添加一些class:
<my-component class='baz boo'></my-component>
HTML最终将渲染成为：
<p class='foo bar baz boo">Hi</p>
同样的适用于绑定HTMlclass：
<my-component v-bind:class='{ active: isActive }'></my-compoent>
当 isActive 为true的时候，HTML将被渲染成为：
<p class='foo bar active'>Hi</p>
绑定内联式样
-
对象语法
v-bind:style
<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:'11px'
}
}
-
数组语法
v-bind:style的数组语法可以将多个样式对象应用到一个元素上:
<div v-bind:style='[baseStyles,overridingStyles]'>
-
自动添加前缀
当v-bind:style使用特定前缀的css属性时，如transform,Vue.js会自动侦测并添加相应的前缀。
