动态绑定样式
vue允许动态设置class的值，通过利用v-bind指令
?情景：
假设存在多个class样式，并给元素指定一个class = "basic", 类名随不同情况更改
<div id="root">
<!--- 动态设置后，类名变为"basic happy" or "basic sad" or "basic normal" --->
<!--- case1: change classname by clicking --->
<!--- 字符串方法，适用于样式类名不确定，需要动态指定" --->
<div class="basic" :class="mood" @click="changeMood">press me</div>
<!--- case2: update/remove classnames of an element --->
<!--- 数组方法：要绑定的样式个数不确定，名字也不确定，需要通过数组的shift/push方法指定数组中的类名" --->
<div class="basic" :class="classArr">press me</div>
<!--- case3: 啊八八八八八八 --->
<!--- 对象方法：适用于样式个数名字都确定，需要动态决定用不用 --->
<div class="basic" :class="classObj">press me</div>
<!--- case4: 用style标签 --->
<!--- style方法： --->
<div class="basic" :style="styleObj">press me</div>
</div>
js脚本创建vue对象，随机选取字符串加入类名中
new Vue({
el: '#root',
data: {
mood: 'normal',
classArr: ['aa', 'bb', 'cc'],
classObj: {
s1: false,
s2: false
},
styleObj: {
// vue内置专门指代css property的属性名
fontSize: '40px',
backgroundColor: 'blue'
}
},
methods: {
changeMood(){
const arr = ['happy', 'sad', 'normal']
const index = Math.floor(Math.random() * 3)
this.mood = arr[index]
}
}
})