亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

004-讀書筆記-Vue官網(wǎng) Class與Style的綁定

hufeng / 3521人閱讀

摘要：綁定綁定，使用，簡寫的形式是。綁定比較靈活，可以使用表達(dá)式字符串對象或數(shù)組。綁定字符串綁定字符串的時(shí)候只能綁定一個(gè)，不能綁定多個(gè)。

1.綁定Class

綁定Class，使用 v-bind:class，簡寫的形式是 :class。綁定Class比較靈活，可以使用表達(dá)式、字符串、對象或數(shù)組。

1-1 搭建結(jié)構(gòu)

首先，新建一些 class 樣式：

  .colorRed {
    color: red;
  }

  .font28px {
    font-size: 28px;
  }

其次，搭建一些HTML結(jié)構(gòu)：

最后，定義一個(gè)屬性，用來保存類名：

1-2 綁定表達(dá)式

綁定表達(dá)式的時(shí)候，可以直接綁定 Vue 實(shí)例中的屬性：

這是一個(gè)div標(biāo)簽

當(dāng)然也可以綁定一個(gè)三目運(yùn)算符：

這是一個(gè)div標(biāo)簽

上面代碼中，使用了一個(gè)字符串，可以正常運(yùn)行，說明可以使用字符串來綁定Class。

1-3 綁定字符串

綁定字符串的時(shí)候只能綁定一個(gè) Class，不能綁定多個(gè)。

這是一個(gè)div標(biāo)簽

如果非要綁定多個(gè)字符串，那么就會(huì)報(bào)錯(cuò)：

這是一個(gè)div標(biāo)簽
[HMR] bundle has 1 errors
1-4 綁定數(shù)組

既然使用字符串不能綁定多個(gè) Class，那么就可以使用數(shù)組來綁定多個(gè) Class。

這是一個(gè)div標(biāo)簽

在數(shù)組中也可以存在表達(dá)式：

這是一個(gè)div標(biāo)簽

數(shù)組的元素也可以是對象：

這是一個(gè)div標(biāo)簽

需要說明的是，{ font28px:clsColor } 中 font28px 是 "font28px" 的簡寫形式，也是一個(gè)字符串；clsColor 是 Vue 實(shí)例的屬性，會(huì)被轉(zhuǎn)成一個(gè)布爾類型的值，如果該值為 true，則顯示 "font28px" 類，否則不顯示。

1-5 綁定對象

綁定對象的寫法如下：

這是一個(gè)div標(biāo)簽

讓我們來理解一下這句代碼：

{ font28px: clsColor }     這句代碼可以寫成下面的形式
{ "font28px": clsColor }   這個(gè)時(shí)候?qū)lsColor轉(zhuǎn)成布爾值
{ "font28px": true }       由于是true，因此顯示類"font28px"
這個(gè)時(shí)候顯示的就是類"font28px"的樣式

綁定對象的時(shí)候，由于對象可以存在多個(gè)屬性，因此，可以實(shí)現(xiàn)多個(gè)Class的綁定。

1-6 總結(jié)

綁定單個(gè)Class使用：

表達(dá)式

字符串

綁定多個(gè)Class使用

數(shù)組

對象

2.綁定Style

綁定Style和綁定Class類似，因此，使用和綁定Class相同的目錄結(jié)構(gòu)，方便查看。

2-1 搭建結(jié)構(gòu)

首先，搭建HTML結(jié)構(gòu)：

其次，定義一個(gè)屬性，用來設(shè)置字體的顏色：

2-2 綁定表達(dá)式 
這是一個(gè)div標(biāo)簽
2-3 綁定字符串 
這是一個(gè)div標(biāo)簽
2-4 綁定數(shù)組

綁定數(shù)組是特別需要注意的，因?yàn)閿?shù)組中的元素必須是樣式對象，如果不是對象，無法正常解析樣式：

這是一個(gè)div標(biāo)簽
2-5 綁定對象

在綁定內(nèi)聯(lián)樣式的時(shí)候，對象是經(jīng)常使用的一種形式：

這是一個(gè)div標(biāo)簽
2-6 在內(nèi)聯(lián)樣式中綁定背景圖

這個(gè)應(yīng)該是比較常見的一種需求了，特別寫出了，做一下筆記：

3.參考內(nèi)容

Class 與 Style 綁定

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

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

相關(guān)文章

  • 005-讀書筆記-Vue官網(wǎng) 自定義指令

    摘要：自定義指令的使用在組件中定義一個(gè)自定義指令，作用將當(dāng)前節(jié)點(diǎn)中字體顏色設(shè)置為紅色。參考內(nèi)容自定義指令 1.自定義指令的使用 在組件中定義一個(gè)自定義指令，作用：將當(dāng)前DOM節(jié)點(diǎn)中字體顏色設(shè)置為紅色。 在自定義指令中簡化了鉤子函數(shù)，下面的鉤子函數(shù)相當(dāng)于 bind 和 unbind 的縮寫： export default { name: app, directives: ...

    teren 評論0 收藏0

  • 002-讀書筆記-Vue官網(wǎng) 認(rèn)識(shí)數(shù)據(jù)與指令

    摘要：首先把改成的形式這是一段測試文字綁定最后的顯示效果如下，如果要看具體的形式，可以在谷歌人員開發(fā)工具中自行查看指令的組成部分經(jīng)過上面的介紹，應(yīng)該對指令有一個(gè)大概的認(rèn)識(shí)，下面就來對指令的每一項(xiàng)進(jìn)行說明。 這篇筆記主要用來說明 Vue 中數(shù)據(jù)的定義和指令的一些特性，后續(xù)會(huì)做更深入的說明。 1.Vue中的data函數(shù) 1-1 使用data函數(shù) 由于使用的是單文件組件，因此 Vue 組件中的數(shù)據(jù)...

    hqman 評論0 收藏0

  • 004-讀書筆記-JavaScript高級(jí)程序設(shè)計(jì) 基本概念(下)

    摘要：操作符，會(huì)將數(shù)值改變正數(shù)變成負(fù)數(shù)負(fù)數(shù)變成正數(shù)。同時(shí)，也說明了，使用兩個(gè)邏輯非操作符和的操作結(jié)果相同。操作符得到的是余數(shù)。不相等操作符有兩種。 這篇筆記的內(nèi)容對應(yīng)的是《JavaScript高級(jí)程序設(shè)計(jì)(第三版)》中的第三章。 1.操作符 1-1 一元操作符 遞增和遞減操作符 遞增和遞減操作符有兩個(gè) ++ 和 --。一元操作符使用的時(shí)候，可以前置也可以后置。由于兩個(gè)操作方式類似，先只說明 ...

    nevermind 評論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

    摘要：一介紹也稱為，讀音類似，錯(cuò)誤讀音，由華人尤雨溪開源并維護(hù)。隱藏四事件之前說了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識(shí)。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進(jìn)行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯(cuò)誤讀音v-u-e，由華人尤雨溪開源并維護(hù)。 Vue有以下特點(diǎn)： 是一個(gè)構(gòu)建用戶界面的框架 是一...

    liukai90 評論0 收藏0

  • Vue學(xué)習(xí)筆記（一）

    摘要：一介紹也稱為，讀音類似，錯(cuò)誤讀音，由華人尤雨溪開源并維護(hù)。隱藏四事件之前說了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識(shí)。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進(jìn)行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯(cuò)誤讀音v-u-e，由華人尤雨溪開源并維護(hù)。 Vue有以下特點(diǎn)： 是一個(gè)構(gòu)建用戶界面的框架 是一...

    rollback 評論0 收藏0

發(fā)表評論

0條評論

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