Vue.js-計算屬性和class與style綁定

Shihira 發布于2019-08-23 16:02 / 2696人閱讀

摘要：每一個計算屬性都包含一個和一個。使用計算屬性的原因在于它的依賴緩存。及與綁定的主要用法是動態更新元素上的屬性。測試文字當的表達式過長或邏輯復雜時，還可以綁定一個計算屬性。

學習筆記：前端開發文檔

計算屬性

所有的計算屬性都以函數的形式寫在Vue實例中的computed選項內，最終返回計算后的結果。

計算屬性的用法

在一個計算屬性中可以完成各種復雜的邏輯，包括運算、函數調用等，只要最終返回一個結果即可。

計算屬性還可以依賴多個Vue實例的數據，只要其中任一數據變化，計算屬性就會重新執行，視圖也會更新。

每一個計算屬性都包含一個getter和一個setter。

絕大多數情況下，只會用默認的getter方法讀取一個計算屬性，在業務中很少用到setter，所以在聲明一個計算屬性時，可以直接使用默認的寫法，不必將getter和setter都聲明。

計算屬性除了簡單的文本插值外，還經常用于動態地設置元素的樣式名稱class和內聯樣式style。當使用組件時，計算屬性也經常用來動態傳遞props。

計算屬性還有兩個很實用的小技巧容易被忽略：

一是計算屬性可以依賴其他計算屬性；

二是計算屬性不僅可以依賴當前Vue實例的數據，還可以依賴其他實例的數據。


    
    {{reverseText}}


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：


    測試文字


new Vue({
    el: "#app",
    data: {
        isActive: true
    },
});

對象中也可以傳入多個屬性，動態切換class。另外，:class可以與普通class共存。

測試文字

data: {
    isActive: true,
    isError: false
}

當:class的表達式過長或邏輯復雜時，還可以綁定一個計算屬性。當條件多于兩個時，都可以使用data或computed。

除了計算屬性，也可以直接綁定一個Object類型的數據，或者使用類似計算屬性的methods。

數組語法

當需要應用多個class時，可以使用數組語法，給:class綁定一個數組，應用一個class列表：


    測試文字


new Vue({
    el: "#app",
    data: {
        activeCls: "active",
        errorCls: "error"
    }
});

// 結果
測試文字

也可以使用三元表達式來根據條件切換class：

測試文字

new Vue({
    el: "#app",
    data: {
        isActive: true,
        activeCls: "active",
        errorCls: "error"
    }
});

當class有多個條件時，可以在數組語法中使用對象語法：


    測試文字

使用計算屬性給元素動態設置類名，在業務中經常用到，尤其是在寫復用的組件時，所以在開發過程中，如果表達式較長或邏輯復雜，應該盡可能地優先使用計算屬性。

在組件中使用

如果直接在自定義組件上使用class或:class，樣式規則會直接應用到這個組件的根元素上。

Vue.component("my-component", {
    template: `一些文本`
});

然后在調用這個組件時，應用對象語法或數組語法給組件綁定class：

這種用法僅適用于自定義組件的最外層是一個根元素，否則會無效。當不滿足這種條件或需要給具體的子元素設置類名時，應當使用組件的props來傳遞。

綁定內聯樣式

使用:style可以給元素綁定內聯樣式，方法與:class類似，也有對象語法和數組語法，很像直接在元素上寫CSS。


    文本


new Vue({
    el: "#app",
    data: {
        color: "red",
        fontSize: 14
    }
});

一般把樣式寫在data或computed中：


    文本


new Vue({
    el: "#app",
    data: {
        styles: {
            color: "red",
            fontSize: 16 + "px"
        }
    }
});

在實際業務中，:style的數組語法并不常用，可以寫在一個對象里面，而較為常用的是計算屬性。

另外，使用:style時，Vue.js會自動給特殊的CSS屬性名稱增加前綴，比如transform。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102644.html

Vue.js如何綁定class和style（內聯樣式）

摘要：我們還可以綁定返回對象的計算屬性。用在組件上輸出這同樣適用于綁定輸出綁定內聯樣式對象語法的對象語法十分直觀看著非常像，其實它是一個對象。 vue的class和style綁定綁定html class 對象語法我們可以傳給 v-bind:class 一個對象，以動態地切換 class：上面的語法表示 class active 的更新將取決于數據屬性 isActive 是否為真值。...

Chaz 2019-08-20 19:05 評論0 收藏0
從零開始學習vue

摘要：二起步在學習之前，需要有扎實的基礎。三核心實例每個應用都是通過構造函數創建的一個新的實例開始的選項對象在這其中的簡稱通常都表示實例的變量名。重要說明:本文會在我有空閑時間時持續更新，相當于是將官網的示例給完全呈現，是為了幫助初學者，也是為了鞏固我自己的技術，我決定將官網給過濾一道消化，敬請期待。一.介紹 vue是一種漸進式框架，被設計為自底向上逐層應用。所謂漸進式框架，我的理解就是...

pinecone 2019-08-02 12:04 評論0 收藏0
從零開始學習vue

摘要：二起步在學習之前，需要有扎實的基礎。三核心實例每個應用都是通過構造函數創建的一個新的實例開始的選項對象在這其中的簡稱通常都表示實例的變量名。重要說明:本文會在我有空閑時間時持續更新，相當于是將官網的示例給完全呈現，是為了幫助初學者，也是為了鞏固我自己的技術，我決定將官網給過濾一道消化，敬請期待。一.介紹 vue是一種漸進式框架，被設計為自底向上逐層應用。所謂漸進式框架，我的理解就是...

flyer_dev 2019-08-29 17:21 評論0 收藏0
從零開始學習vue

摘要：二起步在學習之前，需要有扎實的基礎。三核心實例每個應用都是通過構造函數創建的一個新的實例開始的選項對象在這其中的簡稱通常都表示實例的變量名。重要說明:本文會在我有空閑時間時持續更新，相當于是將官網的示例給完全呈現，是為了幫助初學者，也是為了鞏固我自己的技術，我決定將官網給過濾一道消化，敬請期待。一.介紹 vue是一種漸進式框架，被設計為自底向上逐層應用。所謂漸進式框架，我的理解就是...

617035918 2019-08-26 13:25 評論0 收藏0
Vue.js起手式+Vue小作品實戰

摘要：本文是小羊根據文檔進行解讀的第一篇文章，主要內容涵蓋的基礎部分的知識的，文章順序基本按照官方文檔的順序，每個知識點現附上代碼，然后根據代碼給予個人的一些理解，最后還放上在線編輯的代碼以供練習和測試之用在最后，我參考上的一篇技博，對進行初入的本文是小羊根據Vue.js文檔進行解讀的第一篇文章，主要內容涵蓋Vue.js的基礎部分的知識的，文章順序基本按照官方文檔的順序，每個知識點現附上代...

CompileYouth 2019-08-21 11:18 評論0 收藏0