uni中。标签列表，点击某个选中，再点击消失效果

最近，在用uni写项目。

需求：厨师长添加菜品时，要给菜选属性。属性是多个标签的形式展示出来。

实现思路：明显是需要用选择框来错，但是，属性是以标签的形式展示，复选框，有个选择的勾勾，不好看。如图:

我们就要达到，图二的样式。点击改变北京颜色，改变字体颜色，再点击，则又变回去。

这里有两种思路：

一种就是把属性也弄成复选框，再把那个勾勾去掉。让点击文字，触发点击选中相同的事件。

二种就是自己写，啥都不用。

这里我们用第二种解决方法

直接上代码：

页面：

        <view class="reply">
			<view class="title">
				<text>菜品属性:</text>
			</view>
			<view class="textList">
				<text class="item" 
                v-for="(item,index) in foodAttr" 
				@click="onReplace(item.id)"
				:class="{choose:foodAttrIds.indexOf(item.id)>=0}"
				:key="item">
				{{item.name}}
				</text>
			</view>
		</view>

js：

<script>
	export default {
		data() {
			return {
				foodAttr:[
					{'id':1,'name':'酸'},
					{'id':2,'name':'甜'},
					{'id':3,'name':'苦'},
					{'id':4,'name':'辣'},
					{'id':5,'name':'咸'},
				],
				foodAttrIds : [1],
			}; 
		},
		methods:{
			onReplace(foodAttrId){
				//在数组中，就删除
				var i = this.foodAttrIds.indexOf(foodAttrId);
				if(i>=0){
					this.foodAttrIds.splice(i,1);
				}else{
				//添加
					this.foodAttrIds.push(foodAttrId);
				}
                console.log(this.foodAttrIds);
			},
    }
</script>

css:

	.reply{
		margin:10px 40px;
		.title{
			display: flex;
			justify-content: space-between;
			margin:10px 0;
			.compile{
				color:#0078d7;
			}
		}
		.textList{
			display: flex;
			flex-wrap: wrap;
			.item{
				margin: 0 10px;
				padding: 5px;
				border: 1px solid #bbb;
				border-radius: 10px;
			}
		}
	}
	.choose{
		color: #fff;
		background-color: $color;
	}

效果：

ok，就成功了。

总结下思路：

首先判断，是否选中，就是判断，数组（foodAttr）里面元素的id是否在，另外一个id素组集（foodAttrIds）里面。

然后就是点击，删除和添加效果了。