title: 4、class与style
date: 2017-07-29 22:55:13
tags: vue笔记(妙味)
数据绑定一个常见需求是，操作元素的class列表，和它的style时，因为他们都是属性所以可以用 v-bind 处理他们
但是字符串拼接麻烦又易错。因此在v-bind用于class和style时，Vue专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
绑定class
这里class是否为active取决于isActive是否为真
<!--class="active"-->
<div v-bind:class="{ active: isActive }"></div>
可以在对象中传入更多属性用来动态切换多个class，此外，v-bind:class指令可以与普通的class属性共存
<!--class="static active",如果为true就是class="static active text-danger"-->
<div class="static" v-bind:class="{ active: isActive, text-danger: hasError }">
</div>
通过一个对象获取class名
<!--class="active text-danger"-->
<div v-bind:class="classObject"></div>
通过一个数组获取class名
<!--class="active text-danger"-->
<div v-bind:class="[activeClass,errorClass]"></div>
上面三种写法在Vue中的数据处理：
var app = new Vue({
...
data: {
isActive: true,
hasError: false,
activeClass: 'active',
errorClass: 'text-danger',
classObject: {
active: true,
text-danger: true
}
},
computed:{
classObject:function(){
return {
active:this.isActive && !this.error,
}
}
}
})
需要注意的是，class中如果包括用-连接的类名。一定要写为字符串的形式。
绑定style
v-bind:style的语法十分直观，看着非常像css，但其实是一个js对象。css属性名可以用驼峰式，或者配合引号的短横分隔命名。另外对于css3的前缀，vue会自动添加。
最直接的方式
<!--color: red; font-size: 30px;-->
<div v-bind:style="{color:activeColor,fontSize:fontSize + 'px'}"></div>
直接绑定一个对象通常更好,也可以将多个对象用在一个元素上
<!--color: red; font-size: 13px;-->
<div v-bind:style="styleObject"></div>
在Vue中的数据处理
var app = new Vue({
...
data:{
activeColor:'red',
fontSize:30,
styleObject:{
color:'red',
fontSize:'13px'
}
}
})
