vue针对class和style的处理做了增强处理，表达式结果除了字符串还可以是对象或者数组。
绑定html class
<div id="app">
<div v-bind:class="{active: isActive}">active</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
isActive:true
}
});
</script>
上面isActive属性的真假控制active是否加入dom
绑定数据对象不必内联定义在模板里
如下：
<div id="app">
<div v-bind:class="classObj">active</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
classObj:{
active: true,
'text-danger':true
}
}
});
</script>
也可以绑定一个返回对象的计算属性
<div id="app">
<div v-bind:class="classObj">active</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
isActive: true,
error:true
},
computed:{
classObj:function(){
return {
active1:this.isActive && !this.error,
'text-danger':this.error
}
}
}
});
</script>
这里的class绑定了一个计算属性，计算属性返回一个对象，这种方式更常用且功能更强大。
数组class
v-bind:class可以是一个数组，以下示例
<div id="app">
<div v-bind:class="[activeClass, errorClass]">active</div>
</div>
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass:'text-danger'
}
}）；
可根据条件切换列表中的class，使用三元表达式
<div id="app">
<div v-bind:class="[isActive ? activeClass: '', errorClass]">active</div>
</div>
也可写成
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
var vm = new Vue({
el: '#app',
data: {
isActive:false,
activeClass: 'active',
errorClass:'text-danger'
}
});