uniapp（vue）中动态添加绑定style

style样式动态设置

 1.普通对象动态添加（比较常见）

<template>
    <view>
        <view :style="{color:fontColor}"> </view>

        <view :style="{'color':fontColor}"> </view>
        
        <view :style="{'text-align': 'center','margin-bottom': '20rpx','padding-top':padding_top}"> </view>
         
        <view :style="{ paddingTop: num + 'px' }"></view>
         
        <view :style="{backgroundColor:`${query.label.color}`}"></view>

        <view :style="{backgroundImage: 'url(' + imageURL + ')','background-repeat':'no-repeat', 
                 backgroundSize:'100% 100%'}"></view>
    
        //1.动态添加颜色
        //2.动态添加边距
        //3.动态添加背景图片
    </view>
</template>
 
<script>
    export default {
            data() {
                return {
                    imageURL: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg', //图片
                    num:20, //字体大小
                    fontColor:'red' //字体颜色
                }
          }
    }
</script>

2.数组对象动态添加

<template>
    <view>
        <view :style="[{paddingTop: num + 'px'},{color:fontColor}]"></view>    
        
        <view :style="[{'background-image':`url(${imageURL})`},{'background-repeat':'no-repeat'},
                      {'background-size':'100% 100%'}]"></view>
        
        //1.动态添加颜色，动态添加边距
        //2.动态添加背景图片
    </view>
</template>
 
<script>
    export default {
            data() {
                return {
                    imageURL: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg', //图片
                    num:20, //字体大小
                    fontColor:'red' //字体颜色
                }
          }
    }
</script>

 3.三步运算动态添加

<template>
    <view>
        <view :style="[{color:(flag?fontColor:'green')},{fontSize:'20px'}]">green</view>
        
        <view :style="[{color:(!flag?fontColor:'green')}]">red</view>
        
        //如果flag为true   颜色就为red色
        //如果flag为false  颜色就为green色
 
 
       <view :style="[flag?{top:searchTop + 'px',width:searchWidth + 'px'}:{top:'100px',width:'100%'}]"></view>
    </view>
</template>
 
<script>
   export default {
        data() {
            return {
                fontColor:'red',
                flag:false,
                searchTop:20,
                searchWidth:100
            }
      }
}
</script>

4.多重值（这种用的不是很多）

<view :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></view>