vue：动态绑定样式（style及class）

1.style动态样式

---

<!-- 常规字符串写法 -->
<div class="basic" style="font-size: 40px;">{{name}}</div>
<div class="basic" :style="{fontSize: fsize + 'px'}">{{name}}</div>
<!-- 对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div>
<!-- 数组写法 -->
<div class="basic" :style="[styleObj1,styleObj2]">{{name}}</div>
<div class="basic" :style="styleArr">{{name}}</div>

data: {
    name: '尚硅谷',
    fsize: 40,
    styleObj: {
        fontSize: 40 + 'px',
        color: 'red',
        backgroundColor: 'teal'
    },
    styleObj1: {
        fontSize: 40 + 'px',
        color: 'red',
    },
    styleObj2: {
        backgroundColor: 'teal'
    },
    styleArr: [
        {
            fontSize: 40 + 'px',
            color: 'red',
        },
        {
            backgroundColor: 'teal'
        }
    ]
},

2.class动态样式

---

<!-- 字符串写法 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
<!-- 数组写法 -->
<div class="basic" :class="classArr">{{name}}</div>
<!-- 对象写法 -->
<div class="basic" :class="classObj">{{name}}</div>

data: {
    name: '尚硅谷',
    mood: 'normal',
    classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
    classObj: {
        atguigu1: false,
        atguigu2: false
    }
},