操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
绑定HTMLclass
- 对象语法
传给v-bind:class
一个对象以动态切换class.
<div v-bind:class="{active:isActive}"></div>
<div class="static"
v-bind:class="{active:isActive,'text-danger':hasError}">
</div>
上述可知,v-bind指令也可以和普通的class attribute共存.
绑定的数据对象不必内联定义在模板里,例如:
<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'
}
}
}
- 数组语法
我们可以把一个数组传给v-bind:class
,以应用一个class列表
<div v-bind:class="[activeClass,errorClass]"></div>
....
data:{
activeClass:'active',
errorClass:'text-danger'
}
//渲染为:
<div class="active text-danger"></div>
想要根据条件切换列表中的class,可以用三元表达式
在数组语法中也可以使用对象语法:
<div v-bind:class="[{active:isActive},errorClass]"></div>
绑定内联样式
- 对象语法
<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'
}
}
同样的,对象语法常常结合返回对象的计算属性使用。
- 数组语法
和class绑定相似,不再记录
- 自动添加前缀
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时,如 transform,Vue.js 会自动侦测并添加相应的前缀。