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

原创

深漂小码哥 2021-02-25 18:37:36 博主文章分类：Uniapp ©著作权

文章标签 html mysql 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者深漂小码哥的原创作品，请联系作者获取转载授权，否则将追究法律责任

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>

	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);
	}