非常教程

Vue 2参考手册

指南 | Guide

6. Class and Style Bindings(类和样式绑定)

数据绑定的常见需求是操作元素的类列表及其内联样式。既然它们都是属性,我们可以用它v-bind来处理它们:我们只需要用我们的表达式计算最终的字符串。但是,干涉字符串连接是烦人的并且容易出错。出于这个原因,Vue v-bindclassand一起使用时会提供特殊的增强功能style。除了字符串之外,表达式还可以评估为对象或数组。

绑定HTML类

对象语法

我们可以传递一个对象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>

何时isActivehasError更改,班级列表将相应更新。例如,如果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,但只适用activeClassisActive的真实情况。

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

<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对象。对于CSS属性名称,您可以使用camelCase或kebab-case(对kebab-case使用引号):

<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>

自动前缀

当您使用需要一个CSS属性供应商前缀的v-bind:style,例如transform,Vue公司会自动检测并添加相应的前缀所应用的样式。

多个值

2.3.0+

从2.3.0+开始,您可以为样式属性提供多个(前缀)值的数组,例如:

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

这只会呈现浏览器支持的数组中的最后一个值。在此示例中,它将呈现display: flex支持flexbox前缀版本的浏览器。

Vue 2

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

主页 https://vuejs.org/
源码 https://github.com/vuejs/vue
版本 2
发布版本 2.5.2

Vue 2目录