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


Posted by yuhantaiwan on 2020-04-19

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 屬性共存。

  • valuedata 賦予為 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 的值。
  • valuedata 賦予為 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 包住) 來表達。
  • valuedata 賦予值。
<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 的值。
  • valuedata 賦予值。
<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>

參考資料


#w3HexSchool #Vue #javascript







Related Posts

Next.js

Next.js

初探網頁前後端架構

初探網頁前後端架構

學習 Git (1) - 安裝 Git & 基本設定

學習 Git (1) - 安裝 Git & 基本設定


Comments