ylbtech-Vue.js：樣式綁定

 

1.返回頂部

1、

Vue.js 樣式綁定

Vue.js class

class 與 style 是 HTML 元素的屬性，用於設置元素的樣式，我們可以用 v-bind 來設置樣式屬性。

Vue.js v-bind 在處理 class 和 style 時， 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。

---

class 屬性綁定

我們可以為 v-bind:class 設置一個對象，從而動態的切換 class:

實例 1

實例中將 isActive 設置為 true 顯示了一個綠色的 div 塊，如果設置為 false 則不顯示：

<div v-bind:class="{ active: isActive }"></div>

 嘗試一下 »

以上實例 div class 為：

<div class="active"></div>

我們也可以在對象中傳入更多屬性用來動態切換多個 class 。

實例 2

text-danger 類背景顏色覆蓋了 active 類的背景色：

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

 嘗試一下 »

以上實例 div class 為：

<div class="static active text-danger"></div>

 我們也可以直接綁定數據里的一個對象：

實例 3

text-danger 類背景顏色覆蓋了 active 類的背景色：

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

 嘗試一下 »

實例 3 與 實例 2 的渲染結果是一樣的。

此外，我們也可以在這里綁定返回對象的計算屬性。這是一個常用且強大的模式：

實例 4

new Vue({
  el: '#app',
  data: {
  isActive: true,
  error: null
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal',
      }
    }
  }
})

 嘗試一下 »

數組語法

我們可以把一個數組傳給 v-bind:class ，實例如下：

實例 5

<div v-bind:class="[activeClass, errorClass]"></div>

 嘗試一下 »

以上實例 div class 為：

<div class="active text-danger"></div>

我們還可以使用三元表達式來切換列表中的 class ：

實例 6

errorClass 是始終存在的，isActive 為 true 時添加 activeClass 類：

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

 嘗試一下 »

---

 Vue.js style(內聯樣式)

我們可以在 v-bind:style 直接設置樣式：

實例 7

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥教程</div>
</div>

 嘗試一下 »

以上實例 div style 為：

<div style="color: green; font-size: 30px;">菜鳥教程</div>

也可以直接綁定到一個樣式對象，讓模板更清晰：

實例 8

<div id="app">
  <div v-bind:style="styleObject">菜鳥教程</div>
</div>

 嘗試一下 »

v-bind:style 可以使用數組將多個樣式對象應用到一個元素上：

實例 9

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鳥教程</div>
</div>

 嘗試一下 »

注意：當 v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測並添加相應的前綴。

2、

2.返回頂部

 

3.返回頂部

 

4.返回頂部

 

5.返回頂部

1、

http://www.runoob.com/vue2/vue-class-style.html

2、

 

6.返回頂部

 

作者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。