<ul id="qqyow"></ul>

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

hufeng 發(fā)布于2019-08-21 17:16 / 3474人閱讀

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

1.綁定Class

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

1-1 搭建結構

首先，新建一些 class 樣式：

  .colorRed {
    color: red;
  }

  .font28px {
    font-size: 28px;
  }

其次，搭建一些HTML結構：

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

1-2 綁定表達式

綁定表達式的時候，可以直接綁定 Vue 實例中的屬性：

這是一個div標簽

當然也可以綁定一個三目運算符：

這是一個div標簽

上面代碼中，使用了一個字符串，可以正常運行，說明可以使用字符串來綁定Class。

1-3 綁定字符串

綁定字符串的時候只能綁定一個 Class，不能綁定多個。

這是一個div標簽

如果非要綁定多個字符串，那么就會報錯：

這是一個div標簽

[HMR] bundle has 1 errors

1-4 綁定數(shù)組

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

這是一個div標簽

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

這是一個div標簽

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

這是一個div標簽

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

1-5 綁定對象

綁定對象的寫法如下：

這是一個div標簽

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

{ font28px: clsColor }     這句代碼可以寫成下面的形式
{ "font28px": clsColor }   這個時候將clsColor轉成布爾值
{ "font28px": true }       由于是true，因此顯示類"font28px"
這個時候顯示的就是類"font28px"的樣式

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

1-6 總結

綁定單個Class使用：

表達式

字符串

綁定多個Class使用

數(shù)組

對象

2.綁定Style

綁定Style和綁定Class類似，因此，使用和綁定Class相同的目錄結構，方便查看。

2-1 搭建結構

首先，搭建HTML結構：

其次，定義一個屬性，用來設置字體的顏色：

2-2 綁定表達式

這是一個div標簽

2-3 綁定字符串

這是一個div標簽

2-4 綁定數(shù)組

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

這是一個div標簽

2-5 綁定對象

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

這是一個div標簽

2-6 在內(nèi)聯(lián)樣式中綁定背景圖

這個應該是比較常見的一種需求了，特別寫出了，做一下筆記：

3.參考內(nèi)容

Class 與 Style 綁定

云服務器 GPU云服務器讀書筆記編程思想讀書筆記大數(shù)據(jù)時代讀書筆記綁定Style樣式

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

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

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

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

teren 2019-08-22 11:13 評論0 收藏0
002-讀書筆記-Vue官網(wǎng) 認識數(shù)據(jù)與指令

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

hqman 2019-08-21 17:15 評論0 收藏0
004-讀書筆記-JavaScript高級程序設計基本概念(下)

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

nevermind 2019-08-22 11:13 評論0 收藏0
Vue學習筆記（一）

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

baoxl 2019-08-30 13:47 評論0 收藏0
Vue學習筆記（一）

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

liukai90 2019-08-21 17:05 評論0 收藏0