:class 绑定一个对象
<div v-bind:class="{ active: isActive }">text</div>
data: {
isActive: true
}
也可直接在data中定义对象
<div :class="classObject">text</div>
data: {
classObject: {
activate: true
}
}
除了绑定对象还可绑定数组
<div :class="[activeClass, errorClass]">text</div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为
<div class="active text-danger">text</div>
第三种则是方便的style方式,更加直观
<div :style="styleObject">text</div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
注意对象使用与computed食用更佳