2020-web前端-vue 循环多个标签，点击标签变色，再点击取消，可以同时点击多个

╰半夏微凉° 2022-12-11 06:26 197阅读 0赞

## 同学，先看一下效果吧！！！！ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]

> 看到了吧，这就是我要完成的，效果哦，上面的标签卡，我要选中，并且还可以多选，我还可以取消任意一个。

## 首先，看看，这行代码 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]

## 定义，一个数组 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]

## 最后也逻辑 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]

<template>
    	<view class="complain">
    		
    		<view class="type">
    			<text class="type-title">投诉类型</text>
    			<view class="type-view">
    				<view class="type-li" v-for="(item, index) in typeLi" :key="index" @tap="hander(index, $event)">
    					
    					<view class="type-item" :class="{ bgcolor: spanIndex.indexOf(index) > -1 }">{ {  item.name }}</view>
    				</view>
    			</view>
    		</view>
    
    		
    	</view>
    </template>
    
    <script>
    export default { 
    	data() { 
    		return { 
    			typeLi: [
    				{ 
    					name: '服务态度'
    				},
    				{ 
    					name: '菜品问题'
    				},
    				{ 
    					name: '付款问题'
    				}
    			],
    
    			// 选中
    			isactive: 0,
    			spanIndex: []
    		};
    	},
    	onLoad() { },
    	methods: { 
    		hander(index, e) { 
    			// console.log(index, e);
    			// this.isactive = index
    			let arrIndex = this.spanIndex.indexOf(index);
    			console.log(arrIndex);
    
    			if (arrIndex > -1) { 
    				this.spanIndex.splice(arrIndex, 1);
    			} else { 
    				this.spanIndex.push(index);
    			}
    		}
    	}
    };
    </script>
    
    <style lang="scss" scoped>
    .complain { 
    	padding: 0 40rpx;
    	box-sizing: border-box;
    
    	// 投诉类型
    	.type { 
    		.type-title { 
    			line-height: 2;
    			font-size: 36rpx;
    		}
    		.type-view { 
    			display: flex;
    			.type-li { 
    				margin-right: 20rpx;
    				.type-item { 
    					width: 170rpx;
    					height: 60rpx;
    					border-radius: 30rpx;
    					border: 1px solid #ccc;
    					color: #666;
    					display: flex;
    					align-items: center;
    					justify-content: center;
    				}
    			}
    		}
    
    		.bgcolor { 
    			background-color: #f0ad4e;
    			color: #fff !important;
    			border: 1px solid #f0ad4e !important;
    		}
    	}
    
    	// 投诉文本
    }
    </style>

## 这就是实现的原理，你们可以瞧瞧！！！ look look !!! ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/91ccc34fa969492f8b0a27aa2f43a67c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/c6f28ce160ef48898f9b4c0cf733fd0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/e0c5ec6314864ebfb654edd28b084fec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/e2e141111fcc46a2bb7f4f6bc706e4be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/da7c904a3b1a4a52822f25cd2234b8ed.png