2.5 v-bind class style的动态绑定

Vue v-bind

• v-bind可以简写 :

• v-bind对class的动态绑定

  <!--动态绑定class JSON形式-->
  <!--1.class会和:class的内容合并，并不会存在替换。-->
  <!--2.:class后面的Boolean为true，则该类就会被激活-->
  <view  class="类名3" :class="{类名:Boolean,类名2:Boolean}"></view>
  
  <!--动态绑定class 数组形式-->
  <!--1.class会和:class的内容合并，并不会存在替换。-->
  <!--2.数组形式绑定多个class-->
  <view  class="类名3" :class="[类名1,类名2]"></view>
  

• v-bind对style的动态绑定

  <!--动态绑定style JSON形式-->
  <!--1.style会和:style的内容合并-->
  <view  style="border:solid 1px #000000" :style="{backgroundColor: red }"></view>
  
  <!--动态绑定style 数组形式-->
  <!--1.style会和:style的内容合并-->
  <view  style="border:solid 1px #000000" :style="[backgroundStyle,]"></view>
  <script>
   export default{
       data(){
         return {
            backgroundStyle:{
               backgroundColor: #000000 ,
               width: 100rpx 
            }
         }
       }
   }
  </script>