uni-app通过添加class修改样式属性-微信小程序

最新推荐文章于 2024-04-11 10:34:53 发布

异想实验室

最新推荐文章于 2024-04-11 10:34:53 发布

阅读量1.8k

点赞数

分类专栏： HTML uniapp 文章标签： uni-app

异想实验室

本文链接：https://blog.csdn.net/weixin_43775400/article/details/127524652

版权

HTML 同时被 2 个专栏收录

11 篇文章 2 订阅

订阅专栏

uniapp

11 篇文章 1 订阅

订阅专栏

实现点击某个元素，则变色的效果；

效果1，默认选中第一个

效果1代码

<template>
	<view>
		<view>
		</view>
		<view class="list_class" v-for="(item,index) in list" @click="test_click(index)":class="{'list_add_class':num==index}">
			{{item}}
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: ['北京', '上海', '广东', '深圳'],
				num: '',
			}
		},
		methods: {
			test_click(index) {
				this.num = index
			},
		}
	}
</script>
<style>
	.list_class {
		margin-top: 20rpx;
		height: 200rpx;
		width: 780rpx;
		text-align: center;
		line-height: 200rpx;
		background-color: gold;
	}

	.list_add_class {
		background-color: hotpink;
	}
</style>

效果2，默认全部不变色

效果2代码

<template>
	<view>
		<view>
		</view>
		<view class="list_class" v-for="(item,index) in list" @click="test_click(index)":class="{'list_add_class':num==index}">
			{{item}}
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: ['北京', '上海', '广东', '深圳'],
				num: '这里不等于空，默认都不变色',
			}
		},
		methods: {
			test_click(index) {
				this.num = index
			},
		}
	}
</script>
<style>
	.list_class {
		margin-top: 20rpx;
		height: 200rpx;
		width: 780rpx;
		text-align: center;
		line-height: 200rpx;
		background-color: gold;
	}

	.list_add_class {
		background-color: hotpink;
	}
</style>