绑定htmlClass

通过{{}}方式绑定class

    
        <div class="{{hello}}">直接取data上对象的属性</div>
    

通过v-bind的方式(绑定单一class)

    
        <div v-bind:class="hello">绑定属性</div>
    
    

绑定多个class名字

    
        <div v-bind:class="{hello:true,world:false}">123</div>
    

直接绑定对象

    
        <div v-bind:class="message">123</div>
        data:{
        message:{
        hello:true,
        world:true
        }
        }
    

绑定htmlClass

直接绑定数组

    <div v-bind:class="[hello,world]">123</div>
    data:{
    hello:'hello',
    world:'world'
    }

三元运算符号

    
    <div v-bind:class="[hello,isTrue?'hello1':'hellow2']">123</div>
    

对象和数组混用

    
    <div v-bind:class="[hello,{world:isTrue}]">123</div>
        
    

{{className}}和v-bind:class不要混用;

class 和v-bind:class可以同时存在

绑定行内样式

直接绑定到

    <div v-bind:style="{color:'red',background:'yellow'}">行内</div>

绑定对象

    <div v-bind:style="className">行内</div>
    data:{
    className:{    color:'red'    }
    }

数组方式绑定多组对象

    <div v-bind:style="[hello,world]">2个样式</div>
    data:{
    hello:{    color:'red'     },
    world:{    'fontSize':'50px'    }
    }

自动添加前缀