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、效果

在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐