vue中绑定class而影响样式

1、绑定字符串变量

为class绑定一个字符串，color是一个字符串变量，例如color的值是’red’，那么表示div拥有red类。
通过改变color变量的值，可以让div拥有不同的样式。

 <div class="box" :class="color">

2、对象形式

为class绑定一个对象，对象中可含有多个键值对，键为类名，值为true或false。
当isred的值为true时，当前元素就有red就这class。
所以可以通过控制isred为true或false，从而影响div的样式。

<div class="box" :class="{red:isred}">

class绑定的这个对象也可以写在data中，也可写在computed中，非常灵活。

3、数组形式

为class绑定一个数组，数组中可放

1. 字符串（类名）
2. 也可放data中的变量，变量的值是类名字符串
3. 可放一个对象，键为类名，值为true或false

<div class="box" :class="['red']">

4、通过绑定style修改样式

style中驼峰写法

<div class="box" :style="{backgroundColor:'blue'}"></div>

style也可写成数组