一、绑定类名。
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
类名active和text-danger取决于变量isActive和hasError的布尔值真假
二、绑定内联样式。
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
也可以直接绑定到一个对象
<div :style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
三、v-for和v-if同时使用的问题
v-for渲染比v-if具有更高的优先级。
一般将v-if放在v-for的外层盒子元素上。
四、遍历对象时。
可以有三个参数 依次为 值、键、索引。
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
