vue動態繫結class的最常用幾種方式:
阿新 • • 發佈:2021-06-10
第一種:(最簡單的繫結)
1.繫結單個class
html部分:
<div :class="{'active':isActive}"></div>
js部分:判斷是否繫結一個active
data() { return { isActive: true }; }
結果渲染為:
<div class="active"></div>
2.若要繫結多個class,需要逗號隔開就行:(這裡的activeTwo加不加引號都可以,也一樣都能渲染,如下)
<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>
js部分:判斷是否繫結對應class
data() { return { isActive: true, hasError: true }; }
結果渲染為:
<div class="activeOne activeTwo activeThree"></div>
第二種:(繫結的資料物件)
<div :class="classObject"></div>
data: { classObject: { active: true, } }
<div :class="classObject"></div>
export default { data() { return { isActive: true, }; }, computed: { classObject: function () { return { active: this.isActive, } } }
結果渲染為:
<div class="active"></div>
第四種:(單純陣列方法)
<div :class="[activeClass, errorClass]"></div>
data() { return { activeClass: "active", errorClass: "disActive" }; },
結果渲染為:
<div class="active disActive"></div>
第五種:(陣列與三元運算子結合判斷選擇需要的class)
<div :class="[isActive?'active':'disActive']"></div>
data() { return { isActive: false, }; },
結果渲染為:
<div class="disActive"></div>