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

原创已于 2024-04-15 16:52:03 修改 · 5.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #uni-app #前端 #经验分享 #javascript #css #html5

于 2024-04-15 16:48:51 首次发布

uni-app 同时被 2 个专栏收录

14 篇文章

订阅专栏

CSS

4 篇文章

订阅专栏

本文详细介绍了在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>

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'
						}
						break
					case 2 || 3:
						styleDict = {
							'background': 'rgba(252, 84, 33, 0.2)',
							'color': '#FC5421'
						}
						break
					default:
						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'
						break
					case 12:
						strClass = 'page3'
						break
					default:
						strClass = ''
						break;
				}
				return strClass
			}
       }
	}
</script>