5.1—HTML/Class与的绑定

<style>
    .textColor {
       color: red;
     }
     .text-font {
        font-size: 24px;
     }
</style>
<div id="app">
    <!--给予v-bind:class=根据类名对应data中的对象属性，来赋予class-->
    <p :class="{textColor:styleClass.text_color,'text-font':styleClass.text_font}">{{msg}}</p>

    <!-- 在data中定义类名：布尔值的性质来给予类-->
    <p :class="styleObj">{{msg}}</p>

    <!--在计算属性中,可以进行简单的判断，来给予其类-->
    <p :class="classObj">{{msg}}</p>
    
    <!--可以只用数组形式,来直接定义与间接定义其类-->
    <p :class="[textcolor,{'text-font':styleClass.text_font}]">{{msg}}</p>
</div>
<script>
    new Vue({
        data:{
            msg:123123132,
            error:null,
            isColor:true,
            styleClass:{
                'text_color':true,
                'text_font':false,
            },
            styleObj:{
                textColor:true,
                'text-font':true,
            }
        },
        computed:{
            classObj:function () {
                return {
                    textColor:this.isColor
                }
            }
        }
    }).$mount('#app');
</script>

绑定内联样式

和绑定类名类似，可以使用对象绑定，数组绑定与计算属性绑定

:style='xxxx'

像transform这种C3需要兼容的，Vue会自动侦测并添加（-webkit，-ms...）

多重值

简单说就是css样式后的兼容写法

<div :style="{dispaly:['-webkit-box','-ms-flexbox','flex']}"></div>