uniappvue中动态添加绑定style + class

目录

一、style样式动态设置

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

2.数组对象动态添加

 3.三步运算动态添加

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

二、class动态设置 

 普通动态添加（比较常见）

---

一、style样式动态设置

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

<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.动态添加背景图片

export default {
		data() {
			return {
				imageURL: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg', //图片
				num:20, //字体大小
				fontColor:'red' //字体颜色
			}
	  }
},

2.数组对象动态添加

<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.动态添加背景图片

export default {
		data() {
			return {
				imageURL: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg', //图片
				num:20, //字体大小
				fontColor:'red' //字体颜色
			}
	  }
},

 3.三步运算动态添加

<view :style="[{color:(flag?fontColor:'green')},{fontSize:'20px'}]">green</view>

<view :style="[{color:(!flag?fontColor:'green')}]">red</view>

//如果flag为true   颜色就为red色
//如果flag为false  颜色就为green色

export default {
		data() {
			return {
				fontColor:'red',
				flag:false
			}
	  }
}，

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

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

二、class动态设置 

 普通动态添加（比较常见）

<template>
     <view :class="flag?'flaGreen':'flagRed'">1234546</view>
</template>

<style>
	.flaGreen{
		color: green
	}
	.flagRed{
		color: red
	}
</style>

	export default {
		data() {
			return {
				flag:false
			}
		}
}