Vue class与style绑定

1. 理解
   在应用界面中, 某个(些)元素的样式是变化的
   class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
   xxx是字符串
   xxx是对象
   xxx是数组
3. style绑定
   :style="{ color: activeColor, fontSize: fontSize + 'px' }"
   其中activeColor/fontSize是data属性

html:
<div id="demo">
    <h2>1. class绑定: :class='xxx'</h2>
    <p class="cClass" :class="a">xxx是字符串</p>
    <p :class="{aClass: isA, bClass: isB}">xxx是对象</p>
    <p :class="['aClass', 'cClass']">xxx是数组</p>

    <h2>2. style绑定</h2>
    <p :style="{color: activeColor, fontSize: fontSize + 'px'}">style绑定</p>

    <button @click="update">更新</button>
</div>

css:
.aClass{
            color: red;
        }
        .bClass{
            color: blue;
        }
        .cClass{
            font-size: 30px;
        }

script:
    new Vue({
        el: '#demo',
        data: {
            a: 'aClass',
            isA: true,
            isB: false,
            activeColor: 'red',
            fontSize: 20
        },
        methods: {
            update(){
                this.a = 'bClass';
                this.isA = false;
                this.isB = true;
                this.activeColor = 'green';
                this.fontSize = 30;
            }
        }
    })