uniapp中实现标签选择和取消

<template>
	<view>
		<p :class="value.class1" v-for="(value,index) in infoArr" @click="selectHobby(index)">{{value.name}}</p>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoArr: [{
						name: '乘车体验',
						class1: 'curs'
					},
					{
						name: '线路优化',
						class1: 'curs'
					},
					{
						name: '提前发车',
						class1: 'curs'
					},
					{
						name: '没停靠站',
						class1: 'curs'
					},
					{
						name: '物品遗失',
						class1: 'curs'
					},
					{
						name: '车票问题',
						class1: 'curs'
					},
					{
						name: '产品功能',
						class1: 'curs'
					},
					{
						name: '其他',
						class1: 'curs'
					}
				],
				newsArr: []
			}
		},
		methods: {
			selectHobby(index) {
				console.log(index);
				var a = -1;
				for (var i = 0; i < this.newsArr.length; i++) {
					if (this.newsArr[i].name == this.infoArr[index].name) {
						a = i
					}
				}
				if (a == -1) {
					this.newsArr[this.newsArr.length] = this.infoArr[index];
					this.infoArr[index].class1 = 'cur';
				} else {
					console.log("重复的");
					console.log(a);
					this.newsArr.splice(a, 1)
					this.infoArr[index].class1 = 'curs'
				}

				console.log(this.infoArr[index]);
				console.log(this.newsArr);
			}
		}
	}
</script>

<style>
	.curs{
		color: #000;
		border: 1px solid #e5e5e5;
		/* background-color: #ff5d00; */
		display: inline-block;
		border-radius: 30rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
	}
	.cur {
		color: white;
		border: 1px solid #e5e5e5;
		background-color: #ff5d00;
		display: inline-block;
		border-radius: 30rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
	}
</style>