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>