class 与 style绑定

1.class绑定 （:class = xxx）

1.xxx是字符串

<style>
        .baseclass{
            font-size: 30px;
        }
        .aclass{
            color: red;
        }
        .bclass{
            color: blue;
        }
    </style>

<div id="app">
        //静态的class可同时存在
        <p class="baseclass" :class="a">xxx是字符串</p>
        <button @click="a='bclass'">updata</button>
    </div>

const vm = new Vue({
            el:'#app',
            data:{
                 a:'aclass'
            }   
        })

2.xxx是对象

<p :class="{aclass:isA,bclass:isB}">xxx是对象</p>

 const vm = new Vue({
            el:'#app',
            data:{
                 isA:true,
                 isB:false
            }  
        })

3.xxx是数组

<p :class="arrClass">xxx是对象</p>

const vm = new Vue({
            el:'#app',
            data:{
                 arrClass:['aclass','cclass']
            }  
        })

2.style绑定

<div id="app">
       <p :style="{color:activeColor,fontSize:fontSize+'px'}">:style="{color:activeColor,fontSize:fontSize+'px'}"</p>
       <button @click="updata">updata</button>
    </div>

const vm = new Vue({
            el:'#app',
            data:{
               activeColor:'red',
               fontSize:30  
            },
            methods:{
                updata(){
                    this.activeColor = 'blue';
                    this.fontSize = 10
                }
            }
        })