綁定樣式：
1. class樣式寫(xiě)法:class="xxx" xxx可以是字符串、對(duì)象、數(shù)組。字符串寫(xiě)法適用于：類(lèi)名不確定，要?jiǎng)討B(tài)獲取。對(duì)象寫(xiě)法適用于：要綁定多個(gè)樣式，個(gè)數(shù)不確定，名字也不確定。數(shù)組寫(xiě)法適用于：要綁定多個(gè)樣式，個(gè)數(shù)確定，名字也確定，但不確定用不用。2. style樣式:style="{fontSize: xxx}"其中xxx是動(dòng)態(tài)值。:style="[a,b]"其中a、b是樣式對(duì)象。
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>綁定樣式</title><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px dashed rgb(2, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.ata1{background-color: yellowgreen;}.ata2{font-size: 30px;text-shadow:2px 2px 10px red;}.ata3{border-radius: 20px;}</style><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/><div class="basic" :class="classArr">{{name}}</div> <br/><br/><div class="basic" :class="classObj">{{name}}</div> <br/><br/><div class="basic" :style="styleObj">{{name}}</div> <br/><br/><div class="basic" :style="styleArr">{{name}}</div></div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'123',mood:'normal',classArr:['ata1','ata2','ata3'],classObj:{ata1:false,ata2:false,},styleObj:{fontSize: '40px',color:'red',},styleObj2:{backgroundColor:'orange'},styleArr:[{fontSize: '40px',color:'blue',},{backgroundColor:'gray'}]},methods: {changeMood(){const arr = ['happy','sad','normal']const index = Math.floor(Math.random()*3)this.mood = arr[index]}},})</script></html>
