Vue.js-計算屬性和class與style繫結
學習筆記：前端開發文件
計算屬性
所有的計算屬性都以函式的形式寫在Vue例項中的computed
選項內，最終返回計算後的結果。
計算屬性的用法
在一個計算屬性中可以完成各種複雜的邏輯，包括運算、函式呼叫等，只要最終返回一個結果即可。
計算屬性還可以依賴多個Vue例項的資料，只要其中任一資料變化，計算屬性就會重新執行，檢視也會更新。
每一個計算屬性都包含一個getter
和一個setter
。
絕大多數情況下，只會用預設的getter
方法讀取一個計算屬性，在業務中很少用到setter
，所以在宣告一個計算屬性時，可以直接使用預設的寫法，不必將getter
和setter
都宣告。
計算屬性除了簡單的文字插值外，還經常用於動態地設定元素的樣式名稱class
和內聯樣式style
。當使用元件時，計算屬性也經常用來動態傳遞props
。
計算屬性還有兩個很實用的小技巧容易被忽略：
- 一是計算屬性可以依賴其他計算屬性；
- 二是計算屬性不僅可以依賴當前Vue例項的資料，還可以依賴其他例項的資料。
<div id="app1"></div>
<div id="app2">
{{reverseText}}
</div>
var app1 = new Vue({
el: "#app1",
data: {
text: '123,456'
},
});
var app2 = new Vue({
el: "#app2",
computed: {
reverseText: function () {
//這裡依賴的是例項app1的資料text
return app1.text.split(',').reverse().join(',');
}
}
});
計算屬性快取
沒有使用計算屬性，在methods
中定義了一個方法實現了相同的效果，甚至該方法還可以接受引數，使用起來更靈活。
使用計算屬性的原因在於它的依賴快取。一個計算屬性所依賴的資料發生變化時，它才會重新取值，在上例中只要text
值不改變，計算屬性也就不更新。但是methods
則不同，只要重新渲染，它就會被呼叫，因此函式也會被執行。
使用計算屬性還是methods
取決於你是否需要快取，當遍歷大陣列和做大量計算時，應當使用計算屬性，除非你不希望得到快取。
v-bind及class與style繫結
v-bind
的主要用法是動態更新HTML元素上的屬性。
在資料繫結中，v-bind
最常見的兩個應用就是元素的樣式名稱class
和內聯樣式style
的動態繫結。
繫結class
的幾種方式
物件語法
給v-bind:class
設定一個物件，可以動態地切換class
：
<div id="app">
<div :class="{'active':'isActive'}">測試文字</div>
</div>
new Vue({
el: "#app",
data: {
isActive: true
},
});
物件中也可以傳入多個屬性，動態切換class
。另外，:class
可以與普通class
共存。
<div class="static" :class="{'active':'isActive','error':isError}">測試文字</div>
data: {
isActive: true,
isError: false
}
當:class
的表示式過長或邏輯複雜時，還可以繫結一個計算屬性。當條件多於兩個時，都可以使用data
或computed
。
除了計算屬性，也可以直接繫結一個Object型別的資料，或者使用類似計算屬性的methods
。
陣列語法
當需要應用多個class
時，可以使用陣列語法，給:class
繫結一個數組，應用一個class
列表：
<div id="app">
<div :class="[activeCls,errorCls]">測試文字</div>
</div>
new Vue({
el: "#app",
data: {
activeCls: 'active',
errorCls: 'error'
}
});
// 結果
<div class="active error">測試文字</div>
也可以使用三元表示式來根據條件切換class
：
<div :class="[isActive ? activeCls : '',errorCls]">測試文字</div>
new Vue({
el: "#app",
data: {
isActive: true,
activeCls: 'active',
errorCls: 'error'
}
});
當class
有多個條件時，可以在陣列語法中使用物件語法：
<div id="app">
<div :class="[{'active':isActive},errorCls]">測試文字</div>
</div>
使用計算屬性給元素動態設定類名，在業務中經常用到，尤其是在寫複用的元件時，所以在開發過程中，如果表示式較長或邏輯複雜，應該儘可能地優先使用計算屬性 。
在元件中使用
如果直接在自定義元件上使用class
或:class
，樣式規則會直接應用到這個元件的根元素上。
Vue.component('my-component', {
template: `<p class="article">一些文字</p>`
});
然後在呼叫這個元件時，應用物件語法或陣列語法給元件繫結class
：
<div id="app">
<my-component :class="{'active':isActive}"></my-component>
</div>
這種用法僅適用於自定義元件的最外層是一個根元素，否則會無效。當不滿足這種條件或需要給具體的子元素設定類名時，應當使用元件的props
來傳遞。
繫結內聯樣式
使用:style
可以給元素繫結內聯樣式，方法與:class
類似，也有物件語法和陣列語法，很像直接在元素上寫CSS。
<div id="app">
<div :style="{'color':color, 'fontSize':fontSize+'px'}">文字</div>
</div>
new Vue({
el: "#app",
data: {
color: 'red',
fontSize: 14
}
});
一般把樣式寫在data
或computed
中：
<div id="app">
<div :style="styles">文字</div>
</div>
new Vue({
el: "#app",
data: {
styles: {
color: 'red',
fontSize: 16 + 'px'
}
}
});
在實際業務中，:style
的陣列語法並不常用，可以寫在一個物件裡面，而較為常用的是計算屬性。
另外，使用:style
時，Vue.js會自動給特殊的CSS屬性名稱增加字首，比如transform
。