国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【Vue樣式綁定】

姘存按 / 1115人閱讀

摘要：上面代碼中通過數(shù)組的方式定義綁定了個屬性，其實就是構(gòu)成了屬性值到樣式名稱之間的映射。

HTML樣式的綁定無非就Class和Style的綁定，使用Vue的時候原生的綁定形式仍然可以使用，但是既然都使用了Vue了，還是建議遵循Vue的語法規(guī)范。

一. 綁定 HTML Class 1.1 對象語法

之前我們說過，html中綁定屬性的方式是使用【v-bind】，那么 class 的綁定也一樣

上面代碼中我們使用【v-bind】為class綁定了一個對象，對象中 active 為class的名稱，樣式是否生效取決于 isActive 是否為真值。

上面代碼中我們?yōu)橐粋€html綁定了多個class,但是只有 active 是生效的，因為 isport 的值為 false ，有了這樣的語法之后，我可以直接通過控制數(shù)據(jù)來控制哪些樣式生效。

【在屬性的綁定中我們可以使用表達(dá)式或者計算屬性】

上面代碼中我們在class的綁定中使用了表達(dá)式，表達(dá)式是一個函數(shù)的調(diào)用，在函數(shù)中我們可以定義更加復(fù)雜的樣式邏輯和樣式列表。

上面代碼中我們使用【計算屬性】同樣定義了一個樣式對象，在計算屬性邏輯中我們也可以定義更加復(fù)雜的樣式列表，有了表達(dá)式和計算屬性為我們的樣式綁定提供了個更加強(qiáng)悍的功能。

1.2 數(shù)組語法

上面介紹了對象的語法，可以說很強(qiáng)悍，那么我再整理一下數(shù)組綁定樣式的寫法。

上面代碼中通過數(shù)組的方式定義綁定了2個class屬性，其實就是構(gòu)成了【data】屬性值到樣式名稱之間的映射。
我們同樣也可以在數(shù)組語法中使用表達(dá)式，引用官網(wǎng)的一個例子

上面代碼中class中始終有 errorClass ，但是 activeClass 是否添加取決于 isActive 是否為真值。

【總結(jié)！！】Class的綁定總覺得數(shù)組的形式過于繁瑣，我們需要定義很多映射關(guān)系屬性，所以從簡潔的角度出發(fā)，建議還是使用【對象】的形式。

1.3 組件綁定Class

如果知道組件，那就看一下，不知道的就先跳過吧。
當(dāng)我們?yōu)榻M件添加class的時候，所有的class會被添加到組件的【根元素上】面，這個根元素上面已經(jīng)有了的class不會被覆蓋。

我們先定義一個組件

Vue.component("hello", {
    template: `
        

            
Hello

        

    `
})

接下來應(yīng)用組件，并添加Class

渲染的結(jié)果如下


    

        

            
Hello

上面代碼中，later被添加到了 hello 組件的【根節(jié)點(diǎn)】上，上面我們是用的原生的 Class 進(jìn)行綁定的，接下來我們換成Vue的綁定形式，會發(fā)現(xiàn)其實效果是一樣的，也是綁定到了【根節(jié)點(diǎn)】上面。
二. 綁定內(nèi)聯(lián)樣式

上面介紹了Class的綁定，我再總結(jié)一下內(nèi)聯(lián)樣式的綁定

2.1 對象語法

在Class的綁定中，對象的屬性是Class名稱，屬性值用于判斷該Class是否生效；在內(nèi)聯(lián)樣式的綁定中，屬性是【樣式名】，屬性值是【樣式值】


    

       
BLUE

上面代碼將樣式對象直接綁定到了HTML元素中，短橫線分割的命名被改成了駝峰命名，Vue1.0中這個要求是比較嚴(yán)格的，但是Vue2.0中支持了短橫線的命名規(guī)則。

上面我們在綁定Class的時候使用了【計算屬性】和【表達(dá)式】的形式,在內(nèi)聯(lián)樣式中我們也來玩一下


    

        
BLUE

上面代碼使用【計算屬性】返回一個對象，用于內(nèi)聯(lián)樣式，表達(dá)式就不演示了，和Class的綁定基本是一樣的。

2.2 數(shù)組語法

內(nèi)聯(lián)樣式的數(shù)組語法其實就是將對各樣式對象用于一個HTML元素，數(shù)組中是一個一個的對象


    

        
BLUE

上面代碼定義了兩個【計算屬性】返回兩個樣式對象，然后綁定到內(nèi)聯(lián)樣式的數(shù)組中，最后解析成注釋的那樣子。總感覺數(shù)組形式的綁定挺麻煩的，反正我不大喜歡用數(shù)組進(jìn)行綁定，但是在分離樣式對象的時候還是挺有用的。

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84653.html

相關(guān)文章

  • Vue 2 | Part 4 v-bind綁定元素屬性和樣式

    摘要：它可以往元素的屬性中綁定數(shù)據(jù)，也可以動態(tài)地根據(jù)數(shù)據(jù)為元素綁定不同的樣式。綁定屬性最簡單的例子，我們有一張圖片，需要定義圖片的。注意樣式的寫法跟會有些許不同，橫杠分詞變成駝峰式分詞。這期就到這里，敬請期待下一期列表渲染和事件監(jiān)聽。 這期跟大家分享的，是v-bind指令。它可以往元素的屬性中綁定數(shù)據(jù)，也可以動態(tài)地根據(jù)數(shù)據(jù)為元素綁定不同的樣式。 綁定屬性 最簡單的例子，我們有一張圖片，需要定...

    vboy1010 評論0 收藏0

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

    摘要：每一個計算屬性都包含一個和一個。使用計算屬性的原因在于它的依賴緩存。及與綁定的主要用法是動態(tài)更新元素上的屬性。測試文字當(dāng)?shù)谋磉_(dá)式過長或邏輯復(fù)雜時，還可以綁定一個計算屬性。 學(xué)習(xí)筆記：前端開發(fā)文檔 計算屬性 所有的計算屬性都以函數(shù)的形式寫在Vue實例中的computed選項內(nèi)，最終返回計算后的結(jié)果。 計算屬性的用法 在一個計算屬性中可以完成各種復(fù)雜的邏輯，包括運(yùn)算、函數(shù)調(diào)用等，只要最終...

    Shihira 評論0 收藏0

  • 學(xué)習(xí)Vue.js-Day1

    摘要：學(xué)習(xí)內(nèi)容，基本語法和概念，打包工具，實戰(zhàn)操作參考文獻(xiàn)官網(wǎng)官方資料庫全家桶全家桶文檔概念前端框架借助可以實現(xiàn)手機(jī)開發(fā)前端框架是一套構(gòu)造用戶界面的框架，只關(guān)于視圖層前端的主要工作室跟用戶界面打交道，中的，實現(xiàn)界面效果框架是為了提高開發(fā) 學(xué)習(xí)內(nèi)容 1，Vue基本語法和概念 2， 打包工具 Webpack , Gulp3，實戰(zhàn)操作 參考文獻(xiàn)：官網(wǎng)： https://cn.vuejs.org...

    Cheriselalala 評論0 收藏0

  • 學(xué)習(xí)Vue.js-Day1

    摘要：學(xué)習(xí)內(nèi)容，基本語法和概念，打包工具，實戰(zhàn)操作參考文獻(xiàn)官網(wǎng)官方資料庫全家桶全家桶文檔概念前端框架借助可以實現(xiàn)手機(jī)開發(fā)前端框架是一套構(gòu)造用戶界面的框架，只關(guān)于視圖層前端的主要工作室跟用戶界面打交道，中的，實現(xiàn)界面效果框架是為了提高開發(fā) 學(xué)習(xí)內(nèi)容 1，Vue基本語法和概念 2， 打包工具 Webpack , Gulp3，實戰(zhàn)操作 參考文獻(xiàn)：官網(wǎng)： https://cn.vuejs.org...

    Cristic 評論0 收藏0

發(fā)表評論

0條評論

姘存按

男|高級講師

TA的文章

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