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、效果
文章来源地址https://www.toymoban.com/news/detail-602808.html
文章来源：https://www.toymoban.com/news/detail-602808.html
到了这里，关于用vue实现点击选中高亮效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
