HTML中為元素綁定Class屬性與Style樣式

在實(shí)際開發(fā)中經(jīng)常會遇到動態(tài)操作元素樣式的需求。因此，vue 允許開發(fā)者通過 v-bind 屬性綁定指令，為元素動態(tài)綁定 class 屬性的值和行內(nèi)的 style 樣式。

1. 動態(tài)綁定 HTML 的 class

可以通過三元表達(dá)式，動態(tài)的為元素綁定 class 的類名。示例代碼如下：

<h3 class="thin" :class="isItalic?'italic'： ">MyDeep組件</h3>
<button @click="isItalic=!isItalic">Toggle Italic</button>

data() {
  return { isItalic: true }
}

.thin{ // 字體變細(xì)
  font-weight:200;
}
.italic{ // 傾斜字體
  font-style: italic;
}

2. 以數(shù)組語法綁定 HTML 的 class

如果元素需要動態(tài)綁定多個 class 的類名，此時可以使用數(shù)組的語法格式：

<h3 class="thin" :class="[isItalic ? 'italic' : '", isDelete ? 'delete' : '"]">
  MyDeep 組件
</h3>

<button @click="isItalic=!isItalic">Toggle Italic</button>
<button @click="isDelete=!isDelete">Toggle Delete</button>

data(){
  return {
    isItalic: true,
    isDelete: false,
  }
}

3. 以對象語法綁定 HTML 的 class

使用數(shù)組語法動態(tài)綁定 class 會導(dǎo)致模板結(jié)構(gòu)臃腫的問題。此時可以使用對象語法進(jìn)行簡化：

<h3 class="thin" :class="class0bj">MyDeep 組件</h3>
<button @click="class0bj.italic = !class0bj.italic">Toggle Italic</button>
<button @click="class0bj.delete = !class0bj.delete">Toggle Delete</button>

data(){
  return {
    classobj：{ //對象中，屬性名是class 類名，值是布爾值
      italic: true,
      delete: false,
    }
   }
}

4. 以對象語法綁定內(nèi)聯(lián)的 style

:style 的對象語法十分直觀——看著非常像 CSS，但其實(shí)是一個 JavaScript 對象。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：

<div :style="{color: active, fontSize: fsize + 'px','background-color': bgcolor}">
黑馬程序員
</div>
<button @click="fsize += 1">字號 +1</button>
<button @click="fsize -= 1">字號 -1</button>

data() {
  return {
    active: 'red',
    fsize: 30,
    bgcolor:'pink',
  }
}