Vue.js 中的 Class 与 Style 的绑定方式

在 Vue.js 中，我们可以通过 v-bind 指令来绑定元素的 class 和 style。这个功能非常强大，可以让我们动态地添加或删除 class 和 style，从而控制元素的样式。

Class 绑定

对象语法

我们可以使用对象语法来绑定 class。例如：

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

这个例子中，我们绑定了一个名为 active 的 class，如果 isActive 为 true，那么这个 class 就会被添加到 div 元素上。

我们也可以绑定多个 class，例如：

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

这个例子中，我们绑定了两个 class，一个是 active，一个是 text-danger。如果 isActive 为 true，则添加 active class，如果 hasError 为 true，则添加 text-danger class。

我们还可以使用计算属性来生成 class 对象，例如：

<div v-bind:class="classObject"></div>

// javascriptcn.com 代码示例
data: {
  isActive: true,
  hasError: false
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.hasError,
      'text-danger': this.hasError
    }
  }
}

这个例子中，我们使用一个计算属性 classObject 来生成 class 对象。如果 isActive 为 true 且 hasError 为 false，则添加 active class，如果 hasError 为 true，则添加 text-danger class。

数组语法

我们也可以使用数组语法来绑定 class。例如：

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

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

这个例子中，我们使用数组语法来绑定 class，activeClass 和 errorClass 都是变量，它们的值会被添加到 div 元素的 class 属性中。

我们还可以在数组中使用三元表达式来切换 class，例如：

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

这个例子中，如果 isActive 为 true，则添加 activeClass，否则不添加任何 class。

Style 绑定

对象语法

我们可以使用对象语法来绑定 style。例如：

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

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

这个例子中，我们绑定了两个 style，一个是 color，一个是 fontSize。它们的值分别是 activeColor 和 fontSize + 'px'。

我们也可以使用计算属性来生成 style 对象，例如：

<div v-bind:style="styleObject"></div>

// javascriptcn.com 代码示例
data: {
  activeColor: 'red',
  fontSize: 30
},
computed: {
  styleObject: function () {
    return {
      color: this.activeColor,
      fontSize: this.fontSize + 'px'
    }
  }
}

这个例子中，我们使用一个计算属性 styleObject 来生成 style 对象。它包含了两个 style，一个是 color，一个是 fontSize。

数组语法

我们也可以使用数组语法来绑定 style。例如：

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

// javascriptcn.com 代码示例
data: {
  baseStyles: {
    color: 'red',
    fontSize: '30px'
  },
  overridingStyles: {
    fontSize: '20px'
  }
}

这个例子中，我们使用数组语法来绑定 style，baseStyles 和 overridingStyles 都是对象。它们的值会被合并成一个对象，然后添加到 div 元素的 style 属性中。在合并时，后面的对象会覆盖前面的对象。

总结

在 Vue.js 中，我们可以通过 v-bind 指令来绑定元素的 class 和 style。我们可以使用对象语法或数组语法来绑定 class 和 style，也可以使用计算属性来生成 class 和 style 对象。这个功能非常强大，可以让我们动态地添加或删除 class 和 style，从而控制元素的样式。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6507bc0f95b1f8cacd2fbdfb