1.标签中添加:class属性和click事件:
<view class="tags-box">
<view v-for="(item,index) in tagsList" :key="index" :class="tagsActive==index ? 'tags-active':'tags'" @click="typeSelect(index,$event)">{
{item.tagName}}</view>
</view>
样式
.tags-box {
display: flex;
flex-wrap: wrap;
.tags {
background: #FFFFFF;
border: 1rpx solid #A0A0A0;
color: #A3A3A3;
font-size: 30rpx;
font-weight: 500;
border-radius: 30rpx;
padding: 8rpx 16rpx;
margin: 30rpx 12rpx 0 0;
}
.tags-active {
font-size: 30rpx;
font-weight: 500;
color: #FFFFFF;
background: #F6AD34;
border-radius: 30rpx;
padding: 8rpx 18rpx;
margin: 30rpx 12rpx 0 0;
}
}
2.data中设置默认选中第一个:tagsActive: 0,
tagsList: [{
tagName: '水果蔬菜'
},
{
tagName: '品质生鲜'