Vue class与style绑定

class绑定：#

1. 字符串形式：样式的类名不确定，需要动态指定。

   <div class="default" :class="style1"></div>
   

2. 数组形式：要绑定的样式个数不确定，名字也不确定。

   <div class="default" :class="array"></div>
   
   <script>
       const vm = new Vue({
           data:{
               array:['style1','style2']
           }
       })
   </script>
   

3. 对象形式：要绑定的样式个数确定，名字也确定，对象形式，但要动态决定用不用。

   <div class="default" :class="obj"></div>
   
   <script>
       const vm = new Vue({
           data:{
               obj:{
                   style1:true,
                   style2:false
               }
           }
       })
   </script>
   

style绑定：#

1. 对象形式：

   <div class="default" :style="obj"></div>
   
   <script>
       const vm = new Vue({
           data:{
               obj:{
                   //根据原有属性驼峰原则
                   fontSize:'40px',
                   color:'red'
               }
           }
       })
   </script>
   

2. 数组形式

   <div class="default" :style="[obj,obj2]"></div>
   
   <script>
       const vm = new Vue({
           data:{
               obj:{
         
                   //根据原有属性驼峰原则
                   fontSize:'40px',
                   color:'red'
               }，
               obj2:{
                   backgroundColor:'blue'
               }
           }
       })
   </script>
   
   或
   <div class="default" :style="array"></div>
   <script>
       const vm = new Vue({
           data:{
               array:[
               {
                   //根据原有属性驼峰原则
                   fontSize:'40px',
                   color:'red'
               }，
               {
                   backgroundColor:'blue'
               }]
           }
       })
   </script>