vue關於class和樣式的使用

這篇文章主要為大家詳細介紹了Vue.js的Class與樣式綁定,具有一定的參考價值，感興趣的小伙伴們可以參考一下

數據綁定一個常見需求是操作元素的 class 列表和它的內聯樣式。因為它們都是 attribute，我們可以用 v-bind 處理它們：只需要計算出表達式最終的字符串。

不過，字符串拼接麻煩又易錯。因此，在 v-bind 用於 class 和 style 時，Vue.js 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。

下面就介紹這幾種綁定方式的使用：

1.對象語法：

我們可以傳給v-bind:class一個對象，以動態的切換class。注意：v-bind:class指令可以與普通的class特性共存:

<div class="mySelf" v-bind:class="{'class-a':isA,'class-b':isB}"></div>

data:{
   isA:true,
   isB:false
}

此時渲染：

<div class="mySelf class-a"></div>

通過控制isA和isB的變化來控制class的顯示和隱藏

換種思考方式：我們可以把class直接賦值一個對象

<div class="mySelf" v-bind:class="classObject"></div>

data:{
    classObject:{
      'class-a':true,
      'class-b':false
    }
}

我們也可以在這里綁定一個返回對象的一個計算屬性，所以這里的用法非常強大！。

2.數組語法：

我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表

<div v-bind:class="[classA,classB]"></div>
 
data: {
 classA: 'class-a',
 classB: 'class-b'
}

此時渲染：

<div v-bind:class="[classA,classB]">

data: {
 classA: 'class-a',
 classB: 'class-b',
 isB:true
}

如果想根據條件切換列表的class，可以用三元表達式

<div v-bind:class="[classA,isB?classB:'']"></div>

可以控制isB來調節classB的顯隱

不過，當有多個條件 class 時這樣寫有些繁瑣。在 1.0.19+ 中，可以在數組語法中使用對象語法：

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

3.綁定內聯樣式

v-bind:style 的對象語法十分直觀——看着非常像 CSS，其實它是一個 JavaScript 對象。CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）

<div v-bind:style="{color:bgColor,fontSize:fontSize+ 'px'}"></div>

data:{
  bgColor:'white',
  fontSize: 16
}

既然可以這么寫，那么也就可以寫成對象模式，這樣會更清晰

<div v-bind:style="styleObject"></div>

data:{
  styleObject:{
    color:'white',
    fontSize:'16px'
  }
}

同樣的，對象語法也可以結合返回對象的計算屬性使用

 

這就是所總結樣式用法，希望於大家共同成長吧！