类和样式绑定

数据绑定的一种常见需求是操作元素的类列表及其内联样式。由于它们都是属性，我们可以使用 v-bind 来处理它们：我们只需要使用表达式计算最终的字符串。但是，处理字符串连接很烦人且容易出错。出于这个原因，Vue.js 在 v-bind 用于 class 和 style 时提供了特殊的增强功能。除了字符串之外，表达式还可以计算为对象或数组。

绑定 HTML 类

虽然你可以使用类似 class="{{ className }}" 的花括号插值来绑定类，但不建议将这种样式与 v-bind:class 混用。选择其中一种！

对象语法

我们可以将一个对象传递给 v-bind:class 来动态切换类。请注意，v-bind:class 指令可以与普通的 class 属性共存

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

data: {
  isA: true,
  isB: false
}

这将渲染

<div class="static class-a"></div>

当 isA 和 isB 发生变化时，类列表将相应更新。例如，如果 isB 变为 true，类列表将变为 "static class-a class-b"。

你也可以直接绑定到数据中的对象

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

data: {
  classObject: {
    'class-a': true,
    'class-b': false
  }
}

这将渲染相同的结果。你可能已经注意到，我们也可以绑定到一个返回对象的计算属性。这是一个常见且强大的模式。

数组语法

我们可以将一个数组传递给 v-bind:class 来应用一个类列表

<div v-bind:class="[classA, classB]">

data: {
  classA: 'class-a',
  classB: 'class-b'
}

这将渲染

<div class="class-a class-b"></div>

如果你想有条件地切换列表中的类，可以使用三元表达式

<div v-bind:class="[classA, isB ? classB : '']">

这将始终应用 classA，但只有当 isB 为 true 时才会应用 classB。

但是，如果你有多个条件类，这可能会有点冗长。在 1.0.19+ 版本中，你也可以在数组语法中使用对象语法

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

绑定内联样式

对象语法

v-bind:style 的对象语法非常简单 - 它看起来几乎像 CSS，只是它是一个 JavaScript 对象。你可以使用 camelCase 或 kebab-case 作为 CSS 属性名称

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

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

通常最好直接绑定到样式对象，这样模板更简洁

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

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

同样，对象语法通常与返回对象的计算属性一起使用。

数组语法

v-bind:style 的数组语法允许你将多个样式对象应用于同一个元素

<div v-bind:style="[styleObjectA, styleObjectB]">

自动添加前缀

当你使用需要在 v-bind:style 中添加供应商前缀的 CSS 属性时，例如 transform，Vue.js 将自动检测并添加适当的前缀到应用的样式中。

← 计算属性条件渲染 →

指南 2.0 1.0 0.12 0.11

类和样式绑定

绑定 HTML 类

对象语法

数组语法

绑定内联样式

对象语法

数组语法

自动添加前缀

指南