Vue.js如何绑定class和style（内联样式）

vue的class和style绑定

绑定html class

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

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

上面的语法表示 class active 的更新将取决于数据属性 isActive 是否为真值 。
我们也可以在对象中传入更多的属性来自由的切换class的值，不仅如此，v-bind还可以与普通的class共存。

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

我们还可以绑定返回对象的计算属性。

<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="[active,error]">

data:{
    active:"a",
    error:"b"
}

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

我们也可以在数组上使用三元运算符

<div v-bind:class="[isavtive ? active:'',error]"></div>

data:{
    active:"a",
    error:"b",
    isActive:true
}

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

当我们更改isActive为false时

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

此例始终添加 error ，但是只有在 isActive 是 true 时添加 active。

用在组件上

Vue.component("mycom",{
    template:"<p class='a b'>hi</p>"
})

<mycom class="c d"></mycom>

输出HTML

<p class="a b c d">hi</p>

这同样适用于绑定HTML class

<mycom v-bind:class="active:isActive"></mycom>

data:{
    isActive:true
}

输出HTML

<p class="a b active">hi</p>

绑定内联样式（v-bind:style）

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式 (camelCase) 或 (配合引号的) 短横分隔命名 (kebab-case)：

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

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

这样我们感觉模板略显繁琐，所以我们可以直接绑定一个样式对象，这样模板会更加清晰

<div v-bind:style="{styleobj}"></div>

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

同样的，对象语法常常结合返回对象的计算属性使用。

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]">我像风一样自由</div>

data:{
    baseStyles:{color:'red'},
    overridingStyles:{'font-size':'10px'}
}

自动添加前缀

因为各大浏览器的私有属性不同，我们有时需要在样式前添加前缀

例如-webkit-（谷歌）-ms-（微软）-moz-（火狐）-o-（opera）

但是我们在vue中就无需添加，因为vue会为我们自动添加前缀

多重值

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

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

这会渲染数组中最后一个被浏览器支持的值。在这个例子中，如果浏览器支持不带浏览器前缀的 flexbox，那么渲染结果会是 display: flex。