<div v-bind:class="{ active: isActive }"></div>
1.当active 为true时 div会增加一个isActive的类。
2. :class也可放置变量
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
会被解析成 <div class="active"></div>
3.:class 后也可放置 计算属性
<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'
}
}
}
4.数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为
<div class="active text-danger"></div>
5 三元表达式:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
6 不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
---------------------------------------------------------------------
1.数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
data(){
return{
baseStyles:{
color:red
},
overridingStyles:{
height:100px
}
}
}