动态绑定class

1. 静态写法
   可与下面动态绑定class方式共存

   这是一段文字
    // p标签上最终的class包括： basic
   
   

2. 字符串写法
   一般适用于类名单一且不确定的情况

   这是一段文字
    // p标签上最终的class包括： basic、mt10
   
   

   new Vue({el: '#root',data: function () {return {className: 'mt10'}}
   });
   

3. 数组写法
   一般适用于类名和个数都不确定的情况

   这是一段文字
    // p标签上最终的class包括： basic、mt10、mb10、pb20
   
   

   new Vue({el: '#root',data: function () {return {classArr: ['mt10', 'mb10', 'pb20']}}
   });
   

4. 对象写法
   一般适用于类名、个数确定，但是否使用不确定的情况

   这是一段文字
    // p标签上最终的class包括： basic、mt20
   
   

   new Vue({el: '#root',data: function () {return {classObj: {mt20: true,mb30: false}}}
   });
   

动态绑定内联style

1. 静态写法

   这是一段文字
   
   

2. 对象写法

   这是一段文字
   
   

   new Vue({el: '#root',data: function () {return {styleObj: {fontSize: '20px',color: 'red'}}}
   });
   

3. 数组写法（不常用）

   这是一段文字
   
   

   new Vue({el: 'root',data: function () {return {styleObj1: {'font-size': '12px',color: 'red'},styleObj2: {backgroundColor: 'yellow'}}}
   });