vue系列学习4：v-bind和style、class绑定

将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。

表达式结果的类型可以是：字符串、对象、数组。

<style>
        .base{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        .red{
            background-color: red;
        }
        .fz{
            font-size: 30px;
        }

    </style>
    <div id="app">
        <div class="base red fz">
            哈哈
        </div>
        <div :class="str">
            哈哈
        </div>
        <div :class="obj">
            哈哈
        </div>
        <div class="base fz" :class="{red: true}">
            哈哈
        </div>
        <div :class="arr">
            haha
        </div>
    </div>
    
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                msg:"hellow vue!",
                str:"base red fz",
                obj:{
                    base:true,
                    red:true,
                    fz:true,
                },
                arr:['base','red','fz'],
            },
        })
    </script>