【uniapp / vue】中动态添加绑定style 或 class

embedded/2024/10/11 13:21:16/

一、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>

4.函数返回

用于根据值不同需要修改的参数过多的时候


<template><view><view :style="getContractStatusStyle(item.rentStatus)">green</view></view>
</template><script>export default {data() {return {fontColor:'red',flag:false,searchTop:20,searchWidth:100}},methods:{getContractStatusStyle(rentStatus : number) {let styleDict = {}switch (rentStatus) {case 0:styleDict = {'background': 'rgba(253, 143, 33, 0.2)','color': '#FD8F21'}break;case 1:styleDict = {'background': 'rgba(80, 93, 255, 0.2)','color': '#505DFF'}breakcase 2 || 3:styleDict = {'background': 'rgba(252, 84, 33, 0.2)','color': '#FC5421'}breakdefault:styleDict = {'background': 'rgba(252, 84, 33, 0.2)','color': '#FC5421'}break;}return styleDict}}}
</script>

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

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

二、class动态设置

1.简单三元运算添加（比较常见）


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

2.函数返回

用于根据值不同需要修改的参数过多的时候


<template><view><view :class="retrunClass(status)">狀態</view></view>
</template><script>export default {data() {return {status:10}}methods:{retrunClass(Status : number) {let strClass = ''switch (Status) {case 10:strClass = 'page1'break;case 11:strClass = 'page2'breakcase 12:strClass = 'page3'breakdefault:strClass = ''break;}return strClass}}}
</script>