vue设置v-for遍历,默认选中第一个样式,点击切换时,样式选中一起发生变化。点击切换样式变化

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: '品质生鲜'
		

猜你喜欢

转载自blog.csdn.net/qq_39695210/article/details/129018374