數(shù)據(jù)綁定的一個(gè)常見(jiàn)需求場(chǎng)景是操縱元素的 CSS class 列表和內(nèi)聯(lián)樣式（style）。因?yàn)?class 和 style 都是 attribute，我們可以和其他 attribute 一樣使用 v-bind 將它們和動(dòng)態(tài)的字符串綁定。但是，在處理比較復(fù)雜的綁定時(shí)，通過(guò)拼接生成字符串是麻煩且易出錯(cuò)的。因此，Vue 專門為 class 和 style 的 v-bind 用法提供了特殊的功能增強(qiáng)。除了字符串外，表達(dá)式的值也可以是對(duì)象或數(shù)組。

綁定 class

綁定對(duì)象

我們可以給 :class (v-bind:class 的縮寫(xiě)) 傳遞一個(gè)對(duì)象來(lái)動(dòng)態(tài)切換 class：

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

上面的語(yǔ)法表示 active 是否存在取決于數(shù)據(jù)屬性 isActive 的真假值。

你可以在對(duì)象中寫(xiě)多個(gè)字段來(lái)操作多個(gè) class。此外，:class 指令也可以和一般的 class attribute 共存。舉例來(lái)說(shuō)，下面這樣的狀態(tài)：

data() {
  return {
    isActive: true,
    hasError: false
  }
}

配合以下模板：

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

渲染的結(jié)果會(huì)是：

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

當(dāng) isActive 或者 hasError 改變時(shí)，class 列表會(huì)隨之更新。舉例來(lái)說(shuō)，如果 hasError 變?yōu)?true，class 列表也會(huì)變成 “static active text-danger”。

綁定的對(duì)象并不一定需要寫(xiě)成內(nèi)聯(lián)字面量的形式，也可以直接綁定一個(gè)對(duì)象：

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

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

這也會(huì)渲染出相同的結(jié)果。我們也可以綁定一個(gè)返回對(duì)象的計(jì)算屬性。這是一個(gè)常見(jiàn)且很有用的技巧：

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

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

綁定數(shù)組

我們可以給 :class 綁定一個(gè)數(shù)組來(lái)渲染多個(gè) CSS class：

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

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

渲染的結(jié)果是：

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

如果你也想在數(shù)組中有條件地渲染某個(gè) class，你可以使用三元表達(dá)式：

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

errorClass 會(huì)一直存在，但 activeClass 只會(huì)在 isActive 為真時(shí)才存在。

然而，這可能在有多個(gè)依賴條件的 class 時(shí)會(huì)有些冗長(zhǎng)。因此也可以在數(shù)組中嵌套對(duì)象：

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

在組件上使用

對(duì)于只有一個(gè)根元素的組件，當(dāng)你使用了 class attribute 時(shí)，這些 class 會(huì)被添加到根元素上，并與該元素上已有的 class 合并。

舉例來(lái)說(shuō)，如果你聲明了一個(gè)組件名叫 MyComponent，模板如下：

<!-- 子組件模板 -->
<p class="foo bar">Hi!</p>

在使用時(shí)添加一些 class：

<!-- 在使用組件時(shí) -->
<MyComponent class="baz boo" />

渲染出的 HTML 為：

<p class="foo bar baz boo">Hi!</p>

Class 的綁定也是同樣的：

<MyComponent :class="{ active: isActive }" />

當(dāng) isActive 為真時(shí)，被渲染的 HTML 會(huì)是：

<p class="foo bar active">Hi!</p>

如果你的組件有多個(gè)根元素，你將需要指定哪個(gè)根元素來(lái)接收這個(gè) class。你可以通過(guò)組件的 $attrs 屬性來(lái)實(shí)現(xiàn)指定：

<!-- MyComponent 模板使用 $attrs 時(shí) -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<MyComponent class="baz" />

這將被渲染為：

<p class="baz">Hi!</p>
<span>This is a child component</span>

綁定內(nèi)聯(lián)樣式style

綁定對(duì)象

:style 支持綁定 JavaScript 對(duì)象值，對(duì)應(yīng)的是 HTML 元素的 style 屬性：

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

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

盡管推薦使用 camelCase，但 :style 也支持 kebab-cased 形式的 CSS 屬性 key (對(duì)應(yīng)其 CSS 中的實(shí)際名稱)，例如：

<div :style="{ 'font-size': fontSize + 'px' }"></div>

直接綁定一個(gè)樣式對(duì)象通常是一個(gè)好主意，這樣可以使模板更加簡(jiǎn)潔：

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

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

同樣的，如果樣式對(duì)象需要更復(fù)雜的邏輯，也可以使用返回樣式對(duì)象的計(jì)算屬性。

綁定數(shù)組

我們還可以給 :style 綁定一個(gè)包含多個(gè)樣式對(duì)象的數(shù)組。這些對(duì)象會(huì)被合并后渲染到同一元素上：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-536654.html

<div :style="[baseStyles, overridingStyles]"></div>

到了這里，關(guān)于【vue3】數(shù)據(jù)綁定，動(dòng)態(tài)渲染class與style的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！