vue動態繫結:class的幾種方式
一、物件語法
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>