一、對象語法
1、給v-bind:class 設置一個對象,可以動態地切換class,例如:
<div id="app">
<div :class="{'active':isActive}"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true
}
})
</script>
最終渲染結果:
<div class="active"></div>
2、對象中也可以傳入多個屬性,來動態切換class。另外,:class可以與普通class共存,例如:
<div id="app">
<div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true,
isError:false
}
})
</script>
最終渲染結果(當數據isActive或isError變化時,對應的class也會更新):
<div class="static active"></div>
3、當:class的表達式過長或邏輯複雜時,還可以綁定一個計算屬性,這是一種友好和常見的用法,一般當條件多於兩個時,都可以使用data或者computed,例如:
<div id="app">
<div :class="classes"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true,
isError:null
},
computed:{
classes(){
return {
active:this.isActive && !this.error,
'text-fail':this.error && this.error.type ==='fail'
}
}
}
})
</script>
除了計算屬性,也可以直接綁定一個Object類型的數據,或者使用類似計算屬性的methods.
二、數組語法
1、當需要應用多個class時,可以使用數組語法,給:class綁定一個數組,應用一個class列表:
<div id="app">
<div :class="[atvieCls,errorCls]"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
atvieCls:'active',
errorCls:'error'
}
})
</script>
渲染後的結果爲:
<div class="active error"></div>
2、使用三元表達式,根據條件切換class(當數據isActive爲真時,樣式active纔會被應用):
<div id="app">
<div :class="[isActive ? activeCls : '',errorCls]"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true,
atvieCls:'active',
errorCls:'error'
}
})
</script>
渲染後的結果爲:
<div class="active error"></div>
3、class有多個條件時,這樣寫較爲煩瑣,可以在數組語法中使用對象語法:
<div id="app">
<div :class="[{'active':isActive},errorCls]"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true,
errorCls:'error'
}
})
</script>
渲染後的結果爲:
<div class="active error"></div>
4、與對象語法一樣,也可以使用data、computed、method三種方法,以計算屬性爲例:
<div id="app">
<button :class="classes"></button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
size: 'large',
disabled: true
},
computed: {
classes: function () {
return [
'btn',
{
['btn-'+this.size]: this.size!=='',
['btn-disabled']: this.disabled,
}
]
}
}
})
</script>
渲染後的結果爲:
<div class="btn btn-large btn-disabled"></div>
以上,樣式btn會始終應用,當數據size不爲空時,會應用樣式前綴btn-,後加size的值;當數據disabled爲真時,會應用樣式btn-disabled.
使用計算屬性給元素動態設置類名,在業務中經常用到,尤其是在寫複用的組件時,所以在開發過程中,如果表達式較長或邏輯複雜,應該儘可能優先使用計算屬性。
三、在組件上使用
如果直接在自定義組件上使用class或:class,樣式規則會直接應用到這個組件的根元素上,例如聲明一個簡單的組件:
<script>
Vue.component('my-component', {
template: '<p class="article">一些文本</p>'
})
</script>
然後在調用該組件時,使用對象語法或數組語法給組件綁定class,以對象語法爲例:
<div id="app">
<my-component :class="'active':isActive"></my-component>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>
最終組件渲染後的結果爲:
<p class="article active">一些文本</p>
這種方法僅適用於自定義組件的最外層是一個根元素,否則會無效,當不滿足這種條件或需要給具體的子元素設置類名時,應當使用組件的 props 來傳遞。