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>
// 默認(rèn)樣式
.classSty {
border-radius: 20rpx;
font-size: 28rpx;
color: #999;
padding: 4rpx 16rpx;
margin-right: 20rpx;
background-color: #f5f5f5;
color: #3d3d3d;
margin: 10rpx;
}
// 選中時(shí)的樣式 (默認(rèn)樣式)
.activeCss {
background-color: #FFE9D2;
color: #ff6f0d;
}
</style>
2、效果
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-602808.html
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-602808.html
到了這里，關(guān)于用vue實(shí)現(xiàn)點(diǎn)擊選中高亮效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
