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

資訊專欄INFORMATION COLUMN

004-讀書筆記-Vue官網 Class與Style的綁定

hufeng / 3473人閱讀

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

1.綁定Class

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

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 綁定數組

既然使用字符串不能綁定多個 Class,那么就可以使用數組來綁定多個 Class。

這是一個div標簽

在數組中也可以存在表達式:

這是一個div標簽

數組的元素也可以是對象:

這是一個div標簽

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

1-5 綁定對象

綁定對象的寫法如下:

這是一個div標簽

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

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

綁定對象的時候,由于對象可以存在多個屬性,因此,可以實現多個Class的綁定。

1-6 總結

綁定單個Class使用:

表達式

字符串

綁定多個Class使用

數組

對象

2.綁定Style

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

2-1 搭建結構

首先,搭建HTML結構:

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

2-2 綁定表達式
這是一個div標簽
2-3 綁定字符串
這是一個div標簽
2-4 綁定數組

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

這是一個div標簽
2-5 綁定對象

在綁定內聯樣式的時候,對象是經常使用的一種形式:

這是一個div標簽
2-6 在內聯樣式中綁定背景圖

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

3.參考內容

Class 與 Style 綁定

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

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

相關文章

  • 005-讀書筆記-Vue官網 自定義指令

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

    teren 評論0 收藏0
  • 002-讀書筆記-Vue官網 認識數據指令

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

    hqman 評論0 收藏0
  • 004-讀書筆記-JavaScript高級程序設計 基本概念(下)

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

    nevermind 評論0 收藏0
  • Vue學習筆記(一)

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

    liukai90 評論0 收藏0
  • Vue學習筆記(一)

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

    rollback 評論0 收藏0

發表評論

0條評論

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