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>
    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容