Vue学习：Vue中的class与style样式绑定

一、绑定class样式

通过使用v-bind：class，一般简写为：：class；

1、字符串写法：

<div :class="mood" @click="changeMood">{{name}}</div>

然后在data中mood:'normal'，并在method中编写changeMood方法实现对mood的更换；

字符串写法适用于：样式的类名不确定，需要动态指定；

2、数组写法：

<div :class="classArr">{{name}}</div>

data中：classArr：['a1','a2','a3'],

适用于：要绑定的样式个数不确定，名字也不确定；

3、对象写法：

<div :class="classObject">{{name}}</div>

data中：classObject：{a1:false,a2:true,a3:false}

适用于：要绑定的样式个数确定、名字也确定，但要动态决定要不要；

4、用在组件上：

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

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

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

然后在使用它的时候添加一些 class：

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

HTML 将被渲染为：

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

二、绑定style样式

1、对象语法：

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

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

2、数组语法 

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

<div v-bind:style="[baseStyles, overridingStyles]"></div>