Close
升级到 Vue 3 | Vue 2 EOL

指南

类和样式绑定

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

绑定 HTML 类

在 Vue School 上观看免费视频课程

对象语法

我们可以将一个对象传递给 v-bind:class 以动态切换类

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

上面的语法意味着 active 类的存在将由数据属性 isActive 的 真值 决定。

你可以通过在对象中添加更多字段来切换多个类。此外，v-bind:class 指令也可以与普通的 class 属性共存。因此，给定以下模板

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

以及以下数据

data: {
  isActive: true,
  hasError: false
}

它将渲染

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

当 isActive 或 hasError 发生变化时，类列表将相应更新。例如，如果 hasError 变成 true，类列表将变成 "static active text-danger"。

绑定的对象不必是内联的

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

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

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

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

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

这将渲染

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

如果你想在列表中也根据条件切换一个类，你可以使用三元表达式

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

这将始终应用 errorClass，但只有在 isActive 为真值时才会应用 activeClass。

但是，如果你有多个条件类，这可能有点冗长。这就是为什么在数组语法中也可以使用对象语法的原因

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

使用组件

本节假设你了解 Vue 组件。你可以跳过它，稍后再回来。

当你对自定义组件使用 class 属性时，这些类将被添加到组件的根元素。此元素上的现有类不会被覆盖。

例如，如果你声明了这个组件

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

然后在使用它时添加一些类

<my-component class="baz boo"></my-component>

渲染的 HTML 将是

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

类绑定也是如此

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

当 isActive 为真值时，渲染的 HTML 将是

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

绑定内联样式

对象语法

v-bind:style 的对象语法非常简单 - 它看起来几乎像 CSS，只是它是一个 JavaScript 对象。你可以使用 camelCase 或 kebab-case（使用 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="[baseStyles, overridingStyles]"></div>

自动添加前缀

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

多个值

2.3.0+

从 2.3.0+ 开始，你可以为样式属性提供多个（带前缀的）值的数组，例如

<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这将只渲染数组中的最后一个值，该值是浏览器支持的。在这个例子中，它将为支持无前缀版本的 flexbox 的浏览器渲染 display: flex。

← 计算属性和侦听器 条件渲染 →
发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。