Class与style:
注意:
1.有-的style属性名都要变成驼峰式,比如font-size要变成fontSize
2.绑定元素的时候使用::style=“{ XXX }”的行式较多
对象的行式:
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
<script>
data(){
isActive: true,
hasError: false
}
</script>
结果渲染为:
结果渲染为:
<div class="static active"></div>
// 当 isActive 或者 hasError 变化时,class 列表将相应地更新。
例如,如果 hasError 的值为 true,class 列表将变为 "static active text-danger"。
绑定的数据对象不必内联定义在模板里:
<div v-bind:class="classObject"></div>
<script>
data: {
classObject: {
active: true,
'text-danger': false
}
}
</script>
数组的行式:
<div :class="[activeClass, errorClass]"></div>
data中的行式:
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染的结果:
<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 class,可以用三元表达式,也可以写成数组中包含对象的行式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>