vue繫結class的三種方法
阿新 • • 發佈:2020-12-25
一、物件語法
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',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 : '',atvieCls:'active',errorCls:'error' } }) </script>
渲染後的結果為:
<div class="active error"></div>
3、class有多個條件時,這樣寫較為煩瑣,可以在陣列語法中使用物件語法:
<div id="app"> <div :class="[{'active':isActive},errorCls:'error' } }) </script>
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來傳遞。
以上就是vue繫結class的三種方法的詳細內容,更多關於vue繫結class的資料請關注我們其它相關文章!