绑定Class样式
Vue里引入 :class="xxx" 来绑定样式，"xxx" 即可以是样式名，也可以是表达式，原有 class 不动；
字符串写法
适用于样式的类名不确定，需要动态指定
需求：写个切换样式的 div ;
<div id="root">
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
</div>
提示1：事先做几个样式， basic、light 、dark、normal、s1、s2、s3 ；
提示2：basic 留做基础样式不动；随事件指定 light 、 dark 或 normal ;
注意： Vue 使用 :class 来绑定样式属性，@click 绑定点击事件，切换样式属性值；
new Vue({
el: "#root",
data: {
name: '点击切换样式',
mood: 'light' // 样式属性，先指定一个；
},
methods: {
changeMood() {
// 点击切换样式，在 dark 和 light 之间
this.mood = this.mood == 'dark' ? 'light' : 'dark'
}
},
})
看效果：随点击事件，样式在 light 和 dark 间切换；
代码改一下，点击切换时，在三种样式随机切换：
new Vue({
el: "#root",
data: {
name: '点击切换样式',
mood: 'normal'
},
methods: {
changeMood() {
// 三个方式放数组里，通过下标随机取一个；
const arr = ['normal', 'light', 'dark']
this.mood = arr[Math.floor(Math.random() * 3)]
console.log(this.mood);
}
},
})
提示1：三种样式放在数组里，通过随机数取整，让 this.mood 选一个样式；
数组写法
适用于要绑定的样式个数不确定、名字也不确定；
<div id="root">
<div class="basic" :class="classArr">{{name}}</div>
</div>
提示1：样式引用数组属性，把样式都放在数组中；
new Vue({
el: "#root",
data: {
name: '数组形式的样式',
classArr: ['s1', 's2', 's3']
}
})
提示2：s1，s2，s3 分别是三个样式，都放在数组里，一起被 :class 调用；操作数组，就可以控制样式的变化了；
看下效果：Vue DevTools 查看 data；
看下效果：开发者工具查看DOM元素；
数组里的样式，全都绑上了，基础样式保持不变；
对象写法
适用于要绑定的样式个数确定，名字也确定，但要动态决定用不用；
<div id="root">
<div class="basic" :class="classObj">{{name}}</div>
</div>
new Vue({
el: "#root",
data: {
name: '数组形式的样式',
classObj: {
s1: true,
s2: true,
s3: false
}
}
})
注意：上面动图文字忘改了，是对象形式的样式；
绑定Style样式
Vue里引入 :style="xxx:xx" 来绑定样式，"xxx:xx" 即样式名和值；这种用的不太多，知道就好；
对象写法
<div id="root">
<div class="basic" :style="styleObj">{{name}}</div>
</div>
提示：通过 :style 调用样式对象；
new Vue({
el: "#root",
data: {
name: '对象形式的style',
styleObj: {
fontSize:'24px',
color:"#069",
border:"1px solid #069",
backgroundColor:"#B9EBFF"
}
}
})
提示：样式对象的语法命名是 JS 的方式，样式名写错不报错，也不显示效果；
看下效果：
其他写法
也可以在 data 里写成 字符串属性或数组属性形式的，用的不多，不演示了；
【绑定样式：class样式】：
写法： :class="xxx" ，xxx 可以是字符串、对象、数组；
1）字符串写法适用于：类名不确定，要动态获取；
2）对象写法适用于：要绑定多个样式，个数不确定，名字也不确定；
3）数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用；
【绑定样式：style样式】：
:style ="{fontSize:xxx}" 其中 xxx 是动态值；
:style = "[a,b]" 其中 a、b 是样式对象；
