绑定class和style

绑定class

1. 写法： :class='xxx' xxx可以是字符串，对象，数组
   字符串写法适用于：类名不确定，要动态确定
   对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
   数组写法适用于： 要绑定多个杨海生，个数确定，名字也确定，但不确定用不用
   代码如下：

<div id="demo">
    <!-- 绑定class类--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mode" @click="changeMode">121312</div>
    <!-- 绑定class类--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
     <div class="basic" :class="modeArr" @click="changeModeArr">121312</div>
    <!-- 绑定class样式--对象写法。适用于：要绑定的样式个数确定，名字也确定，但是要动态决定用不用 -->
    <div class="basic" :class="modeObj">121312</div>
</div>
\
<script>
    new Vue({
    el: '#demo',
    data() {
        return {
            mode: 'basic',
            modeArr: ['basic'],
            modeObj: {
                dark: true,
                normal: false
            }
         }
    }
})

</script>

绑定style

写法： :style='{fontSize: xxx}'其中xxx是动态值
:style='[a, b]'其中a, b是样式对象，代码如下：

<!-- 绑定 style 样式--对象写法 -->
<div class="basic" :style="styleObj"></div>
<!-- 绑定style样式--数组写法 少用-->
<div class="basic" :style="styleArr"></div>

data() {
    return {
        styleObj: {
            backgroundColor: 'red'
        },
        styleObj2: {
            color: 'green'
        },
        styleArr: [
            styleObj,
            styleObj2
        ]
    }
}