Vue中关于class和style绑定（补充）

class绑定补充：

        在组件中使用：在看之前必须对组件有了解，不太了解的话可以先看看官方文档，这里附上链接

组件基础 — Vue.js (vuejs.org)

下面进入正题

class在组件中使用

（1）当我们在一个自定义组件上使用 class 属性时，这些 class 将被添加到该组件的根元素上面。如果这个元素上已经有了class，重点是原有class不会被覆盖，而是一起保留。

像这样，例我们声明了一个组件

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

然后我们在使用这个组件的时候，有添加了一些class，如这样：

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

最后渲染时这个class都会在组件的根元素上：

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

（2）再一，我们使用v-bind动态绑定class时，也是一样的

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

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

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

style绑定补充：

自动添加前缀：

当 v-bind:style 使用需要添加“浏览器引擎前缀“的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

多重值：

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

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

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

总结

class绑定：

1、在组件上添加class属性时，根节点原有class不会被覆盖，会一起设置存在。

2、使用v-bind绑定动态绑定class也是一样的。

style绑定：

1、当使用需要添加 浏览器引擎前缀 的CSS属性时，vue会为我们自动添加。

2、vue 2.3.0版本之后，我们可以为style绑定中的属性提供一个包含多个值的数组，浏览器会渲染数组中最后一个被浏览器支持的值。