Vue 樣式綁定的實現(xiàn)方法
學習 Vue 的時候覺得樣式綁定很簡單，但是使用的時候總是容易搞暈自己。因為 :class 和 :style 里的數(shù)組語法和對象語法和 data 里綁定的值是不太一樣的。這篇文章就簡單對 Vue 綁定做個總結。
操作元素的class列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個常見需求，因為它們都是屬性，所以可用v-bind處理，通過表達式計算出字符串結果即可。不過字符串拼接麻煩且易錯。因此，在將v-bind用于class和style時，Vue做了專門增強，表達式結果類型除了字符串之外，還可是對象或數(shù)組。
- Class綁定
- Style綁定
綁定Class
對象語法
data 里的屬性是負責 toggle 是否要這個 class，也就是一般定義 Boolean 類型的值。
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
這里用 isActive 和 hasError 定義是否需要 active 和 text-danger 類。
data: {
isActive: true,
hasError: false
}
渲染為
<div class="active"></div>
數(shù)組語法
data 里負責定義 CSS 類名。
<div :class="[activeClass, errorClass]"></div>
這里定義了 activeClass 和 errorClass 的 CSS 類名是 active 和 text-danger。
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染為
<div class="active text-danger"></div>
混合寫法
可以用混合的形式來綁定 class，即數(shù)組語法里寫對象語法。所以 data 里的數(shù)據(jù)主要用于：
- 是否需要某個 class
- 定義 "class" 里面的類名
<div :class="[{ active: isActive }, errorClass]"></div>
這里定義了 errorClass 的 CSS 類名為 text-danger，并用 isActive 定義是否需要 active 類。
data: {
errorClass: 'text-danger',
isActive: true
}
渲染為
<div class="active text-danger"></div>
綁定Style
對象語法
data 里的屬性是定義 style 里的值。與 class 不一樣，class 是定義是否要這個 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ù)組語法
可以綁定多個樣式對象到 style 上
<div :style="[baseStyles, overridingStyles]"></div>
這里在 data 里用 styleObject 定義了 color 和 font-size，再用 overridingStyles 定義了 background 和 margin。然后在組件里用數(shù)組進行混合綁定。
data: {
styleObject: {
color: 'red',
fontSize: '13px'
},
overridingStyles: {
background: 'green',
margin: '13px'
}
}
渲染為
<div style="color: red; font-size: 13px; background: green; margin: 13px;"></div>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇vue里input根據(jù)value改變背景色的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vite項目如何集成eslint和prettier問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue3.5中新增的baseWatch函數(shù)用法詳解
在Vue 3.5.0-beta.3版本中新增了一個base watch函數(shù),這個函數(shù)用法和我們熟知的watch API一模一樣,下面就跟隨小編一起來了解一下它的具體使用吧2024-11-11
這篇文章主要為大家詳細介紹了vue2.0使用swiper組件實現(xiàn)輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結構的方法
這篇文章主要介紹了Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結構,本期介紹添加、修改等功能也比較簡單,可以通過element-ui的$prompt彈框控件來實現(xiàn),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue中常用的數(shù)組方法,包括：VUE數(shù)組轉(zhuǎn)換字符串，VUE數(shù)組遍歷，VUE數(shù)組過濾，VUE數(shù)組查詢,VUE數(shù)組排序等功能，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue2.x與Vue3.x中路由鉤子的區(qū)別，分別介紹了路由鉤子的分類，路由配置守衛(wèi)鉤子以及組件內(nèi)守衛(wèi)鉤子等有需要的朋友可以借鑒參考下2021-09-09
在Vue項目中,我們可能會遇到這樣的需求：需要在應用中嵌入iframe頁面,并且要求在路由切換的過程中,iframe的內(nèi)容不會被刷新,本文將介紹如何解決這個問題,并給出具體的實現(xiàn)方案,需要的朋友可以參考下2025-01-01
解決vue中使用Axios調(diào)用接口時出現(xiàn)的ie數(shù)據(jù)處理問題
今天小編就為大家分享一篇解決vue中使用Axios調(diào)用接口時出現(xiàn)的ie數(shù)據(jù)處理問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue自定義組件如何添加使用原生事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04