一、動態(tài)設(shè)置style

1.普通對象動態(tài)添加（比較常見）

<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.動態(tài)添加顏色
		//2.動態(tài)添加邊距
		//3.動態(tài)添加背景圖片
	</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.數(shù)組對象動態(tài)添加

<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.動態(tài)添加顏色，動態(tài)添加邊距
		//2.動態(tài)添加背景圖片
	</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.三目運(yùn)算動態(tài)添加

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

二、動態(tài)設(shè)置?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>

文章來源地址http://www.zghlxwxcb.cn/news/detail-600831.html

到了這里，關(guān)于uniapp、vue中動態(tài)添加綁定style、class的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！