uniapp、vue中动态添加绑定style、class

一、动态设置style

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

<template>
    <view>
        <view :style="{color:fontColor}"> </view>
         
        <view :style="{ paddingTop: num + 'px' }"></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>

二、动态设置 class

<template>
     <view :class="flag?'flaGreen':'flagRed'">I's Xq</view>
</template>
 
<script>
   export default {
        data() {
            return {
                flag:false
            }
      }
}
</script>
 
<style>
    .flaGreen{
        color: green
    }
    .flagRed{
        color: red
    }
</style>