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>
