用vue实现点击选中高亮效果

最新推荐文章于 2025-05-20 09:41:27 发布

嘿是我呀

最新推荐文章于 2025-05-20 09:41:27 发布

阅读量4.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_42998230/article/details/128917241

笔记同时被 2 个专栏收录

8 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

这是一个使用Vue.js编写的代码片段，展示了一个房屋类型选择功能。通过`u-cell-item`组件创建列表项，利用数据绑定`v-for`和`v-bind`来显示房屋类型数据，并通过`activeFun`方法处理点击事件更新选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、代码

<template>
   <u-cell-group :border="false" >
		<u-cell-item title="房屋类型" :title-style="titleSty" :arrow="false" :border-bottom="false">
		</u-cell-item>
		<view>
			<view :class="{'activeCss':activeProperty==index}" class="classSty" v-for="(item,index) in propertyData" @click="activeFun(item,index)" :key="index">
				{{item}}
			</view>
		</view>
	</u-cell-group>
</template>
<script>
	export default {
		data() {
			return {
				// 房屋类型
				property: '',
				activeProperty: null,
				propertyData: ['平房', '普通住宅', '公寓', '别墅', '商住两用']
			}
		},
		methods:{
			//房屋类型
			activeFun(item, index) {
				// item 为被选中的元素
				this.activeProperty = index;
				this.property = item
			}
		}
	}
</script>
<style lang="scss" scoped>
	// 默认样式
	.classSty {
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #999;
		padding: 4rpx 16rpx;
		margin-right: 20rpx;
		background-color: #f5f5f5;
		color: #3d3d3d;
		margin: 10rpx;
	}
	// 选中时的样式 (默认样式)
	.activeCss {
		background-color: #FFE9D2;
		color: #ff6f0d;
	}
</style>

2、效果

在这里插入图片描述