vue绑定样式

3.1、绑定class

绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定

<div class="basic" :class="mood" @click="changeMood"> {{message}}</div>

绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定

<div class="basic" :class="classArr" @click="changeMood"> {{message}}</div>
​
<script>
    new Vue({
        data: {
            classArr: ['lalala', 'hahaha', 'jiejiejie'],
        }
    })
</script>

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

<div class="basic" :class="classObj" @click="changeMood"> {{message}}</div>
<script>
    new Vue({
        data: {
            classObj: {
                flag1: false,
                flag2: false
            }
        }
    })
</script>

3.2、绑定style

绑定style样式--对象写法

<div class="basic" :style="styleObj">{{message}}</div>
<script>
    new Vue({
        data: {
            styleObj: {
                fontSize: '40px',
            }
        }
    })
</script>

绑定style样式--数组写法

<div class="basic" :style="styleArr">{{message}}</div>
<script>
    new Vue({
        data: {
            styleArr: [
                {
                    fontSize: '40px'
                },
                {
                    backgroundColor: 'skyblue'
                }
            ]
        }
    })
</script>