Vue.js 學習旅程Mile 8 – Class & Style Binding

Class & Style Binding

v-bind 常用在 class 和 style 的綁定。一般 v-bind 的表達式為字串，但用在 class 和 style 的綁定時，還可以用物件 { } 或 陣列[ ] 的寫法。

Class Binding

物件寫法1：{key:value} in HTML

• key：Class 名稱。
  value：判斷 Class 名稱是否出現的條件式。若值為 truthiness 則該 Class 名稱就會被賦予。

• 可以有多組 key:value 組合，也可以與已經存在 Class 屬性共存。

• value 由 data 賦予為 true or false。

<style>
.static {
  color: black;
  font-size: 16px;
}
.active {
  background-color: blue;
  color: white;
}
.error {
  background-color: red;
  color: white;
}
</style>

<div
  class = "static"
  :class="{ active: isActive, error: hasError }">
</div>

data: {
  isActive: true,
  hasError: false
}

物件寫法2：{key:value} in data

• 多組 key:value 放在 data 內的 classObject。

<div
  class = "static"
  :class="classObject">
</div>

data: {
  classObject: {
    active: true,
    error: false
  }
}

物件寫法3：{key:value} in computed

• 用 computed 監聽 classObject 的值。
• value 由 data 賦予為 true or false。

<div
  class = "static"
  :class="classObject">
</div>

data: {
  isActive: true,
  hasError: false
},
computed: {
  classObject: function() {
    return {
      active: this.isActive,
      error: this.hasError,
    }
  }
}

陣列寫法1

• data 內寫陣列元素的 Class 名稱。

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

data: { 
  activeClass: 'active', 
  errorClass: 'error' 
}

陣列寫法2 : 三元表達式

• 用 三元表達式 判斷 activeClass 是否出現。

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

data: { 
  isActive: true,
  activeClass: 'active', 
  errorClass: 'error' 
}

陣列寫法3 : 內含物件 {key:value}

• 陣列內包含 物件 {key:value} 判斷式。

<div :class="[{ active : isActive }, errorClass]">
</div>

data: { 
  isActive: true,
  errorClass: 'error' 
}

Style Binding

物件寫法1：{property:value} in HTML

• CSS 屬性使用 camelCase 或是 kebab-case (用 " " quotes 包住) 來表達。
• value 由 data 賦予值。

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
</div>

data: { 
  activeColor: 'red', 
  fontSize: 30 
}

物件寫法2：{property:value} in data

• 多組 property:value 放在 data 內的 styleObject。

<div :style="styleObject"></div>

data: { 
  styleObject: { 
    color: 'red', 
    fontSize: '13px' 
  } 
}

物件寫法3：{property:value} in computed

• 用 computed 監聽 styleObject 的值。
• value 由 data 賦予值。

<div :style="styleObject"></div>

data: {
  fontSize: 12, 
  fontWeight: 'bold'
},
computed: {
  styleObject: function() {
    return {
      fontSize: `${this.fontSize}px`, 
      fontWeight: this.fontWeight
    }
  }
}

陣列寫法

• data 內寫陣列元素的 Style 物件值。

<div :style="[fontStyleObj, backgroundStyleObj]">
</div>

data: { 
  fontStyleObj: { 
    color: 'red', 
    fontStyle: 'italic' 
  }, 
  backgroundStyleObj: { 
    background: 'blue' 
  } 
}

Auto-prefixing

• 使用 Vue 綁定 Style 時， Vue 會幫忙把 -webkit- , -moz- ... 等特定瀏覽器的特殊屬性所需的前綴字自動加上

Multiple Values

• Vue 2.3.0 之後，可以針對一個 CSS property 設定多個不同瀏覽器支援的 value。
• Vue 會從最後一個開始檢驗是否可以用在目前的瀏覽器上，符合的話就用此屬性設定樣式。

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

參考資料

• Vue.js - Class and Style Bindings
• Vue.js: 屬性綁定 v-bind、Class 與 Style 綁定
• Day09 - [Directives] 屬性綁定(Class and Style Binding)
• Vue.js Core 30天屠龍記(第10天): Class 的綁定
• Vue.js Core 30天屠龍記(第11天): 樣式綁定