成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue.js-計(jì)算屬性和class與style綁定

Shihira / 2743人閱讀

摘要：每一個計(jì)算屬性都包含一個和一個。使用計(jì)算屬性的原因在于它的依賴緩存。及與綁定的主要用法是動態(tài)更新元素上的屬性。測試文字當(dāng)?shù)谋磉_(dá)式過長或邏輯復(fù)雜時(shí)，還可以綁定一個計(jì)算屬性。

學(xué)習(xí)筆記：前端開發(fā)文檔
計(jì)算屬性

所有的計(jì)算屬性都以函數(shù)的形式寫在Vue實(shí)例中的computed選項(xiàng)內(nèi)，最終返回計(jì)算后的結(jié)果。

計(jì)算屬性的用法

在一個計(jì)算屬性中可以完成各種復(fù)雜的邏輯，包括運(yùn)算、函數(shù)調(diào)用等，只要最終返回一個結(jié)果即可。

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

每一個計(jì)算屬性都包含一個getter和一個setter。

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

計(jì)算屬性除了簡單的文本插值外，還經(jīng)常用于動態(tài)地設(shè)置元素的樣式名稱class和內(nèi)聯(lián)樣式style。當(dāng)使用組件時(shí)，計(jì)算屬性也經(jīng)常用來動態(tài)傳遞props。

計(jì)算屬性還有兩個很實(shí)用的小技巧容易被忽略：

一是計(jì)算屬性可以依賴其他計(jì)算屬性；

二是計(jì)算屬性不僅可以依賴當(dāng)前Vue實(shí)例的數(shù)據(jù)，還可以依賴其他實(shí)例的數(shù)據(jù)。


    

    {{reverseText}}



var app1 = new Vue({
    el: "#app1",
    data: {
        text: "123,456"
    },
});
var app2 = new Vue({
    el: "#app2",
    computed: {
        reverseText: function () {
            //這里依賴的是實(shí)例app1的數(shù)據(jù)text
            return app1.text.split(",").reverse().join(",");
        }
    }
});
計(jì)算屬性緩存

沒有使用計(jì)算屬性，在methods中定義了一個方法實(shí)現(xiàn)了相同的效果，甚至該方法還可以接受參數(shù)，使用起來更靈活。

使用計(jì)算屬性的原因在于它的依賴緩存。一個計(jì)算屬性所依賴的數(shù)據(jù)發(fā)生變化時(shí)，它才會重新取值，在上例中只要text值不改變，計(jì)算屬性也就不更新。但是methods則不同，只要重新渲染，它就會被調(diào)用，因此函數(shù)也會被執(zhí)行。

使用計(jì)算屬性還是methods取決于你是否需要緩存，當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí)，應(yīng)當(dāng)使用計(jì)算屬性，除非你不希望得到緩存。

v-bind及class與style綁定

v-bind的主要用法是動態(tài)更新HTML元素上的屬性。

在數(shù)據(jù)綁定中，v-bind最常見的兩個應(yīng)用就是元素的樣式名稱class和內(nèi)聯(lián)樣式style的動態(tài)綁定。

綁定class的幾種方式 對象語法

給v-bind:class設(shè)置一個對象，可以動態(tài)地切換class：


    
測試文字




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

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

測試文字


data: {
    isActive: true,
    isError: false
}

當(dāng):class的表達(dá)式過長或邏輯復(fù)雜時(shí)，還可以綁定一個計(jì)算屬性。當(dāng)條件多于兩個時(shí)，都可以使用data或computed。

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

數(shù)組語法

當(dāng)需要應(yīng)用多個class時(shí)，可以使用數(shù)組語法，給:class綁定一個數(shù)組，應(yīng)用一個class列表：


    
測試文字




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

// 結(jié)果

測試文字

也可以使用三元表達(dá)式來根據(jù)條件切換class：

測試文字


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

當(dāng)class有多個條件時(shí)，可以在數(shù)組語法中使用對象語法：


    
測試文字

使用計(jì)算屬性給元素動態(tài)設(shè)置類名，在業(yè)務(wù)中經(jīng)常用到，尤其是在寫復(fù)用的組件時(shí)，所以在開發(fā)過程中，如果表達(dá)式較長或邏輯復(fù)雜，應(yīng)該盡可能地優(yōu)先使用計(jì)算屬性。

在組件中使用

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

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

然后在調(diào)用這個組件時(shí)，應(yīng)用對象語法或數(shù)組語法給組件綁定class：

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

綁定內(nèi)聯(lián)樣式

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


    
文本




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

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


    
文本




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

在實(shí)際業(yè)務(wù)中，:style的數(shù)組語法并不常用，可以寫在一個對象里面，而較為常用的是計(jì)算屬性。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102644.html

相關(guān)文章

  • Vue.js如何綁定class和style（內(nèi)聯(lián)樣式）

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

    Chaz 評論0 收藏0

  • 從零開始學(xué)習(xí)vue

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

    pinecone 評論0 收藏0

  • 從零開始學(xué)習(xí)vue

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

    flyer_dev 評論0 收藏0

  • 從零開始學(xué)習(xí)vue

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

    617035918 評論0 收藏0

  • Vue.js起手式+Vue小作品實(shí)戰(zhàn)

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

    付倫 評論0 收藏0

發(fā)表評論

0條評論

Shihira

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<