uniapp(vue)中动态添加绑定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
			}
		}
}
上一篇:虚拟机配置代理(虚拟机nat)


下一篇:【手把手教程】uniapp + vue 从0搭建仿微信App聊天应用:腾讯云TXIM即时通讯的最佳实践