VUE——绑定样式

正常的样式正常写
变化的样式绑定写

绑定class样式——字符串写法，适用于：样式的类名不确定，需要动态绑定。

<div class="basic" :class="classstr" @click="changeMood">{{name}}</div>

绑定class样式——数组写法，适用于：要绑定的样式个数不确定、名字也不确定。

<div class="basic" :class="classarr" @click="changeMood">{{name}}</div>

绑定class样式——对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用。

<div class="basic" :class="classobj" @click="changeMood">{{name}}</div>

绑定style样式——对象写法

<div class="basic" :style="styleObj">{{name}}</div>     

绑定style样式——数组写法

<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>

new Vue({
        el: '#root',
        data: {
            name: 'wyh',
            mood: "normal",
            arr: ['atguigu1', 'atguigu2', 'atguigu3'],
            classobj: {
                atguigu1: false,
                atguigu2: false
            },
            styleObj: {
                fontSize: '40px'
            },
            styleObj2: {
                backgroundColor: 'orange'
            }
        }