<!--绑定样式：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>