绑定class样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| <div id="demo"> <!-- 绑定class样式--字符串写法,适用于样式类名不确定。需要动态确定 --> <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定,名字也不确定 --> <div class="basic" :class="classArr">{{name}}</div> <!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定,名字也确定,但要动态决定用不用 --> <div class="basic" :class="classObj">{{name}}</div>
</div> <script src="https://unpkg.com/vue@next"></script> <script> Vue.config.productionTip = false Vue.createApp({ data(){ return{ name:'Ann', mood:'normal', classArr:['c1','c2','c3'], classObj:{ 'c1':false, 'c2':false, }
} }, methods:{ changeMood(){ const arr=['happy','sad','normal'] this.mood=arr[Math.floor(Math.random()*3)] } } }).mount('#demo') </script>
|
绑定style样式
1 :style=”{fontSize: xxx}”,其中xxx是动态值