uniapp vue 小程序动态style和class的用法

https://blog.csdn.net/Shids_/article/details/117531088

vue

1.1 绑定单个class

<div :class="{'active':isActive}"></div>

data() {
    return {
      isActive: true
    };
  }

渲染结果

<div class="active"></div>

1.2 绑定多个class

<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>

data() {
    return {
      isActive: true,
      hasError: true
    };
  }

渲染结果

<div class="activeOne activeTwo activeThree"></div>

1.3 数组与三元运算符结合判断选择需要的class

<view :class="[isActive?'active':'disActive']"></view>

data() { return {
      isActive: false,
    };
  }

渲染结果

<view class="disActive"></view>

uniapp

 :class="{setmeal : setmealindex === index}"

 :class="curIndex == index? 'active' : ''"

 :class="item.oneliststare?'oneshow':'onehide'"

 :class="playing?'none':'keepgo'"

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

小程序

用法：
在一个标签的class里添加{{}}模板语法，模板里面是一个三元判别式，其中表达式一般引用data中的属性，表达式返回true或者false，A，B是class名，按照三元判别式的逻辑引用A或B。

<view class="{{ 表达式?'A':'B' }}" ></view>

```javascript
`<view class="container">
  <view>微信小程序动态绑定样式测试</view>
  <!-- border类给按钮添加了蓝色边框，根据data中的属性isRed，选择按钮的背景色 -->
  <button class="border {{ isRed?'red':'green' }}">按钮</button>
</view>

  data: {
    isRed: true
  }

.border {
  border: 10rpx solid blue;
  margin-top: 50rpx;
}
 
.red {
  background-color: red;
}
 
.green {
  background-color: green;
}