Vue 樣式綁定的實(shí)現(xiàn)方法
學(xué)習(xí) Vue 的時(shí)候覺(jué)得樣式綁定很簡(jiǎn)單，但是使用的時(shí)候總是容易搞暈自己。因?yàn)?:class 和 :style 里的數(shù)組語(yǔ)法和對(duì)象語(yǔ)法和 data 里綁定的值是不太一樣的。這篇文章就簡(jiǎn)單對(duì) Vue 綁定做個(gè)總結(jié)。
操作元素的class列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個(gè)常見(jiàn)需求，因?yàn)樗鼈兌际菍傩?，所以可用v-bind處理，通過(guò)表達(dá)式計(jì)算出字符串結(jié)果即可。不過(guò)字符串拼接麻煩且易錯(cuò)。因此，在將v-bind用于class和style時(shí)，Vue做了專(zhuān)門(mén)增強(qiáng)，表達(dá)式結(jié)果類(lèi)型除了字符串之外，還可是對(duì)象或數(shù)組。
- Class綁定
- Style綁定
綁定Class
對(duì)象語(yǔ)法
data 里的屬性是負(fù)責(zé) toggle 是否要這個(gè) class，也就是一般定義 Boolean 類(lèi)型的值。
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
這里用 isActive 和 hasError 定義是否需要 active 和 text-danger 類(lèi)。
data: {
isActive: true,
hasError: false
}
渲染為
<div class="active"></div>
數(shù)組語(yǔ)法
data 里負(fù)責(zé)定義 CSS 類(lèi)名。
<div :class="[activeClass, errorClass]"></div>
這里定義了 activeClass 和 errorClass 的 CSS 類(lèi)名是 active 和 text-danger。
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染為
<div class="active text-danger"></div>
混合寫(xiě)法
可以用混合的形式來(lái)綁定 class，即數(shù)組語(yǔ)法里寫(xiě)對(duì)象語(yǔ)法。所以 data 里的數(shù)據(jù)主要用于：
- 是否需要某個(gè) class
- 定義 "class" 里面的類(lèi)名
<div :class="[{ active: isActive }, errorClass]"></div>
這里定義了 errorClass 的 CSS 類(lèi)名為 text-danger，并用 isActive 定義是否需要 active 類(lèi)。
data: {
errorClass: 'text-danger',
isActive: true
}
渲染為
<div class="active text-danger"></div>
綁定Style
對(duì)象語(yǔ)法
data 里的屬性是定義 style 里的值。與 class 不一樣，class 是定義是否要這個(gè) class的。
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
這里定義了 style 里的 color 和 font-size 的值。
data: {
activeColor: 'red',
fontSize: 30
}
渲染為
<div style="color: red; font-size: 30px"></div>
數(shù)組語(yǔ)法
可以綁定多個(gè)樣式對(duì)象到 style 上
<div :style="[baseStyles, overridingStyles]"></div>
這里在 data 里用 styleObject 定義了 color 和 font-size，再用 overridingStyles 定義了 background 和 margin。然后在組件里用數(shù)組進(jìn)行混合綁定。
data: {
styleObject: {
color: 'red',
fontSize: '13px'
},
overridingStyles: {
background: 'green',
margin: '13px'
}
}
渲染為
<div style="color: red; font-size: 13px; background: green; margin: 13px;"></div>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue 提供了很多自定義指令，大大方便了我們的開(kāi)發(fā)，其中最常用的也就是 v-model，他可以在組件上使用以實(shí)現(xiàn)雙向綁定。它可以綁定多種數(shù)據(jù)結(jié)構(gòu), 今天總結(jié)一下用法2023-04-04
這篇文章主要給大家介紹了關(guān)于vue路由的配置和頁(yè)面切換的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)
Vuex是一個(gè)專(zhuān)門(mén)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式，這篇文章主要介紹了Vuex的基本概念、項(xiàng)目搭建以及入坑點(diǎn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
vue.js出現(xiàn)Vue.js?not?detected錯(cuò)誤的解決方案
這篇文章主要介紹了vue.js出現(xiàn)Vue.js?not?detected錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染（SSR）
直接使用 Vue 構(gòu)建前端單頁(yè)面應(yīng)用，頁(yè)面源碼時(shí)只有簡(jiǎn)單的幾行 html，這并不利于網(wǎng)站的 SEO，這時(shí)候就需要服務(wù)端渲染，本篇文章主要介紹了詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染（SSR），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余字?jǐn)?shù)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余文字?jǐn)?shù)量，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue.js 通過(guò)jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁(yè)面的方法
今天小編小編就為大家分享一篇Vue.js 通過(guò)jQuery ajax獲取數(shù)據(jù)實(shí)現(xiàn)更新后重新渲染頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Springboot+Vue-Cropper實(shí)現(xiàn)頭像剪切上傳效果
這篇文章主要為大家詳細(xì)介紹了Springboot+Vue-Cropper實(shí)現(xiàn)頭像剪切上傳效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue項(xiàng)目及axios請(qǐng)求獲取數(shù)據(jù)方式
這篇文章主要介紹了vue項(xiàng)目及axios請(qǐng)求獲取數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
在vue項(xiàng)目創(chuàng)建的后初始化首次使用stylus安裝方法分享
下面小編就為大家分享一篇在vue項(xiàng)目創(chuàng)建的后初始化首次使用stylus安裝方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01