<!--綁定樣式：1. class 樣式寫法：:class="xxx" xxx 可以是字符串、對象、數組字符串寫法適用于：類名不確定，要動態獲取對象寫法適用于：要綁定多個樣式，個數不確定，名字也不確定數組寫法適用于：要綁定多個樣式，個數不確定，名字不確定，也不確定用不用2. style 樣式:style="{fontSize: xxx}" 其中 xxx 是動態值:style="[a, b]" 其中a b 是樣式對象 --> <div id="root"><!-- 綁定 class 樣式 -- 字符串寫法，適用于：樣式的類名不確定，需要動態指定 --><div class="basic" :class="moon" @click="doChangeColor"></div><!-- 綁定 class 樣式 -- 數組寫法，適用于：要綁定的樣式個數不確定、名字也不確定 --><div class="basic" :class="moonArr"></div><!-- 綁定 class 樣式 -- 對象寫法，適用于：要綁定的樣式個數確定、名字也確定，但要動態綁定決定用不用 --><div class="basic" :class="moonObj"></div><!-- 綁定 style 樣式 -- 對象寫法 --><div class="basic" :style="[styleObj]"></div><!-- 綁定 style 樣式 -- 數組寫法 --><div class="basic" :style="[styleObj, styleObj2]"></div><!-- 綁定 style 樣式 -- 數組中嵌套對象寫法 --><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> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。