腳本之家服務器常用軟件

快捷導航

Vue 樣式綁定的實現(xiàn)方法

更新時間：2019年01月15日 14:47:04 作者：嚴海翔

學習 Vue 的時候覺得樣式綁定很簡單，但是使用的時候總是容易搞暈自己。這篇文章主要介紹了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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 樣式綁定的實現(xiàn)方法

相關文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具