對象語法
- 給
:class綁定對象宰闰，對象可以有多個鍵值對洛二。
<div :class="{ active: isActive}"></div>
-
:class可以和普通class并存。
<div class="static" :class="{ active: isActive}"></div>
- 綁定數(shù)據(jù)中的一個對象。
<div :class="classObject"></div>
data: {
classObject: {
active: true
}
}
- 計算屬性
<div :class="classObject"></div>
data: {
isActive: true
},
computed: {
classObject: function () {
return {
active: this.isActive
}
}
}
數(shù)組語法
- 綁定數(shù)組
<div :class="['active', 'error']"></div>
- 三元表達式
<div :class="[isActive ? 'active' : '']"></div>
- 對象數(shù)組
<div :class="[{isActive: 'active'}, 'error']"></div>
組件
active將被添加到組件的根元素上胶背。
<my-component class="active"></my-component>
<my-component :class="{isActive: active}"></my-component>
綁定內(nèi)聯(lián)樣式
css屬性名可以用駝峰式(camelCase) 或 (配合引號的)短橫分隔命名(kebab-case)
