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

資訊專欄INFORMATION COLUMN

【Vue樣式綁定】

姘存按 / 1112人閱讀

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

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

一. 綁定 HTML Class 1.1 對(duì)象語(yǔ)法

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

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

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

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

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

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

1.2 數(shù)組語(yǔ)法

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

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

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

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

1.3 組件綁定Class

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

我們先定義一個(gè)組件

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

            
Hello

        

    `
})

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

渲染的結(jié)果如下


    

        

            
Hello

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

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

2.1 對(duì)象語(yǔ)法

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


    

       
BLUE

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

上面我們?cè)诮壎–lass的時(shí)候使用了【計(jì)算屬性】和【表達(dá)式】的形式,在內(nèi)聯(lián)樣式中我們也來(lái)玩一下


    

        
BLUE

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

2.2 數(shù)組語(yǔ)法

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


    

        
BLUE

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

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

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

相關(guān)文章

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

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

    vboy1010 評(píng)論0 收藏0

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

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

    Shihira 評(píng)論0 收藏0

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

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

    Cheriselalala 評(píng)論0 收藏0

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

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

    Cristic 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<