uni-app实现多选，点击选中并改变样式，可取消

uni-app实现多选，点击选中并改变样式，可取消。

效果图如下：

点击选中且可以取消选中

在html中

<a :class="{'cur': rSelect.indexOf(index)!=-1}" v-for="(value,index) in infoArr" :key="index" @tap="tapInfo(index)">{{value.name}}</a>

在js中

export default {
	    data(){
	        return{
	            rSelect:[],
				infoArr:[
					{name:'乘车体验'},
					{name:'线路优化'},
					{name:'提前发车'},
					{name:'没停靠站'},
					{name:'物品遗失'},
					{name:'车票问题'},
					{name:'产品功能'},
					{name:'其他'}
				]
	        }
	    },
	    methods:{
	        tapInfo(e) {
		        if (this.rSelect.indexOf(e) == -1) {
		    	    console.log(e)//打印下标
			        this.rSelect.push(e);//选中添加到数组里
		        } else {
			        this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
			    }
	        }
	    }
	}

在css中

.cur {
	color: white;
	border: 1px solid #e5e5e5;
	background-color: #ff5d00;
}

仅供参考，如有错误欢迎大家指出。