uniapp、vue中动态添加绑定style、class-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>

文章来源地址https://www.toymoban.com/news/detail-600831.html

到了这里，关于uniapp、vue中动态添加绑定style、class的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！