- 对象语法:
<div v-bind:class="{active:isActive,'text-danger':hasError}"></div>
data:{
isActive:true,
hasError:false
}
<div v-bind:class="[isActive ? activeClass : '' , errorClass ]"></div>
data:{
activeClass : 'active',
errorClass : 'text-danger'
}
3. Style也可以通过对象语法和数组语法进行动态绑定:
对象语法:
<div v-bind:style="{color : activeColor , fontSize : fontSize + 'px'}"></div>
data:{
activeColor : 'red',
fontSize : 30
}
数组语法:
<div v-bind:style="[styleColor, styleSize]"></div>
data: {
styleColor: {
color:"red"
},
styleSize: {
fontSize : 30
},
}