有時候我們需要根據某些條件動態地設置一個元素的class,這個時候就需要使用Vue的動態class綁定了。
上面的代碼中,v-bind:class指令中的對象字面量{ active: isActive }表示只有在數據屬性isActive值為true時,'active'類才會被渲染出來。如果isActive的值為false或undefined,則不會渲染'active'類。也可以多個class名詞,以空格隔開,例如:
另外,還可以直接綁定一個class對象,這樣更加靈活。例如:
data: { classObject: { active: true, 'text-danger': false } }
這里的classObject是一個包含2個屬性的對象,其key表示class名稱,其value表示這個class是否應該被渲染。這是一個可以通過計算屬性來動態獲取的對象,也可以在methods里定義一個方法,返回這個對象。
data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } }
以上代碼中,classObject計算屬性返回一個對象,它根據isActive屬性和error屬性是否為null來決定是否包含'active'類和'text-danger'類。
除了動態class綁定,Vue還提供了:class語法糖來簡化這個綁定,可以直接將v-bind:class改成:class:
同時,也可以不用對象字面量,而是直接傳遞一個字符串數組,例如:
以上代碼中,如果isActive為true,則添加'active'類,如果error不為null,則添加'text-danger'類。用這種方式,我們可以根據數據的情況,比較方便地組合類名。
總結一下,Vue的:class指令提供了多種方式來動態綁定class,包括對象字面量、class對象、字符串數組、語法糖等,可以根據具體情況選擇最適合的方式。由于class動態綁定是Vue的常用功能,因此需要掌握這個技巧。