1、綁定class的幾種方式數組
1.對象語法app
直接看例子:this
<div id="app3"> <div :class="{'success':isSuccess,'fail':isFail}">對象綁定class</div> //簡單的處理直接使用數據來判斷 <div :class="classes">計算屬性綁定class</div> //當class的表達式過長或邏輯複雜時,使用計算屬性 </div>
var app3 = new Vue({ el: '#app3', data: { isSuccess: true, isFail: false, error: false }, computed: { classes: function(){ return { success: this.isSuccess && !this.error, fail: this.isFail || !this.error } } } });
2.數組語法spa
直接看例子:code
<div id="app4"> <div :class="[successCls,failCls]">綁定多個class屬性</div> //用於來綁定多個class屬性 <div :class="[{'success':isSuccess},failCls]">綁定多個class屬性一</div> //動態的判斷添加那些class屬性,是最經常使用的 </div>
var app4 = new Vue({ el: '#app4', data: { successCls: 'success', failCls: 'fail', isSuccess: true, isFail: false } });
<div id= 」app」>
<button :class= 」classes」></button>
</div>
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 } ] } } });
使用計算屬性給元素動態設置類名,在業務中常常用到,尤爲是在寫複用的組件時,因此在開發過程當中,若是表達式較長或邏輯複雜,應該儘量地優先使用計算屬性。component
3.在組件上使用對象
直接看例子:blog
<div id="app5"> <my-component :class="{'success': isSuccess}"></my-component> </div>
Vue.component('my-component',{ template: '<div class="fail">綁定組件class屬性</div>' }); var app5 = new Vue({ el: '#app5', data: { isSuccess: true } });
這種用法僅適用於自定義組件的最外層是一個根元素,不然會無效,當不知足這種條件或須要給具體的子元素設置類名時,應當使用組件的props 來傳遞。開發
2、綁定內聯樣式io
直接看例子:
<div id="app6"> <div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div> </div>
var app6 = new Vue({ el: '#app6', data: { color: 'red', fontSize: 14 } });
大多數狀況下, 直接寫一長串的樣式不便於閱讀和維護,因此通常寫在data 或computed 裏
<div id="app6"> <div :style="style">文本</div> </div>
var app6 = new Vue({ el: '#app6', data: { style: { color: 'red', fontSize: 14 } } });