<!--綁定樣式：1. class 樣式寫法：:class="xxx" xxx 可以是字符串、對象、數(shù)組字符串寫法適用于：類名不確定，要動態(tài)獲取對象寫法適用于：要綁定多個(gè)樣式，個(gè)數(shù)不確定，名字也不確定數(shù)組寫法適用于：要綁定多個(gè)樣式，個(gè)數(shù)不確定，名字不確定，也不確定用不用2. style 樣式:style="{fontSize: xxx}" 其中 xxx 是動態(tài)值:style="[a, b]" 其中a b 是樣式對象 --> <div id="root"><!-- 綁定 class 樣式 -- 字符串寫法，適用于：樣式的類名不確定，需要動態(tài)指定 --><div class="basic" :class="moon" @click="doChangeColor"></div><!-- 綁定 class 樣式 -- 數(shù)組寫法，適用于：要綁定的樣式個(gè)數(shù)不確定、名字也不確定 --><div class="basic" :class="moonArr"></div><!-- 綁定 class 樣式 -- 對象寫法，適用于：要綁定的樣式個(gè)數(shù)確定、名字也確定，但要動態(tài)綁定決定用不用 --><div class="basic" :class="moonObj"></div><!-- 綁定 style 樣式 -- 對象寫法 --><div class="basic" :style="[styleObj]"></div><!-- 綁定 style 樣式 -- 數(shù)組寫法 --><div class="basic" :style="[styleObj, styleObj2]"></div><!-- 綁定 style 樣式 -- 數(shù)組中嵌套對象寫法 --><div class="basic" :style="styleObj3"></div></div> <script src="../js/vue.js"></script> <script>Vue.config.productionTip = false;const vm = new Vue({el: '#root',data: {moon: 'beautiful1',moonArr: ['beautiful1', 'beautiful2', 'beautiful3'],moonObj: {beautiful1: false,beautiful2: true,beautiful3: false,},styleObj: {backgroundColor: 'red'},styleObj2: {borderRadius: '50%'},styleObj3: [{backgroundColor: 'red'},{borderRadius: '50%'},]},methods: {doChangeColor() {let index = Math.floor(Math.random() * 3 + 1);this.moon = 'beautiful' + index;}}}) </script> 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的vue 样式绑定 class的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。