Vue | 06 类和样式绑定

内容提要：

1. 绑定HTML classes的语法：对象语法、数组语法、在组件上的使用
2. 绑定内联样式的语法：对象语法、数组语法、自动加前缀与多个值的使用

对于数据绑定的一种常见需要是操作元素的类列表和它的内联样式。由于它们都是属性，我们能用v-bind管理他们。我们仅仅需要使用我们的表达式计算最后的字符串。然而，字符串串联的干扰是令人烦恼和易于出错的。因为这个原因，当v-bind用于class和style的时候Vue提供了特定的改进手段。除了字符串，表达式也可以使用对象和数组作计算。

绑定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：ture,
    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
    }
}

这将返回相同的结果，我们也能够绑定一个computed property 返回一个对象。这是一种常用的和强大的模式：

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

data: {
    isActive: true,
    error: null
},
computed: {
    classObject: function() {
        return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.errror.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。

然而，如果有多个条件的class可能有一点长，这就是为什么在数组语法内使用对象语法：

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

组件中使用

这部分内容假定你有 Vue Components知识。你可以选择跳过这节稍后再回来。

当你在自定义的组件上使用class属性的时候，这些classes将被添加到组件的根元素。这个元素上已经存在的classes将不会被覆盖。

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

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

当使用它的时候添加一些classes：

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

HTML将被渲染成：

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

class绑定也是同样的道理：

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

当isActive为真的时候，HTML将被渲染成：

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

创建内联样式

对象语法

v-bind:style对象语法相当简单-它看起来和CSS很像，只是它是JavaScript对象。你即可以使用驼峰或短横线隔开（用单引号括起来）来命名CSS属性：

<div v-bind:style="{color: activeColor, 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中请求vendor prefixes ，例如transform,Vue将自动寻找和添加合适的前缀给到所使用的样式。

多个值

2.3.0+

从2.3.0+开始你能提供一个数组的多个值给到一个样式属性，例如：

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

这里对于支持的浏览器仅仅渲染最后一个值。在这个例子里，它将渲染为display：flex用于支持非前缀版本的flexbox的浏览器。