uniapp点击切换样式,动态加载样式

HTML

			<view class="zz-sel-box">
				<view @click="changeMoney(0)" :class="{selStyle:money == 0}" class="zz-sel-item">
					其他面额
				</view>
				<view @click="changeMoney(300)" :class="{selStyle:money == 300}" class="zz-sel-item">
					300元
				</view>
				<view @click="changeMoney(500)" :class="{selStyle:money == 500}" class="zz-sel-item">
					500元
				</view>
				<view @click="changeMoney(1000)" :class="{selStyle:money == 1000}" class="zz-sel-item">
					1000元
				</view>
			</view>

JS

	export default {
		data() {
			return {
				money: 0,
			}
		},
		methods: {
			changeMoney(money) {
				console.log(money)
				this.money = money
			}
		}
	}

STYLE

	.selStyle {	
		border-image: linear-gradient(120deg, rgba(255, 180, 9, 1), rgba(242, 158, 0, 1)) 2 2;
		border: 2rpx solid #F29E00;
		box-shadow: 0px 4px 8px 0px rgba(233, 201, 152, 0.51);
	}

猜你喜欢

转载自blog.csdn.net/qq2942713658/article/details/114098828