思路    
定義一個數組來記錄被點選的元素  arr
陣列通過indexOf來來查詢 
如果有,啟用類就是true
沒有； 啟用類為false
這一步最關鍵的是查詢的內容就是顯示出來的index，
		
點選的時候傳遞引數（key），通過indexOf查詢
如果沒有 push到arr;
若是有；splice刪除這個元素




看了上面這個一段程式碼，發現的問題
1==》 rSelect在data中宣告的是一個數組； 但是在html中 indexOf這個方法是對字串使用的   【陣列也有indexOf  用法跟字串是一樣的哈  ok】
2==》 rSelect在data中宣告的是一個數組； 在方法中又是indedxOf和push對它進行操作，這樣也可以？ 【可以】
splice('刪除元素的起始下標','刪除個數')它是對陣列進行操作的   
它到底是一個啥子型別的；

=====================================
這個文章就可以就可以解決你的疑問了 https://blog.csdn.net/weixin_41829196/article/details/90482193

var arr = [1,2,3];
console.log(arr.indexOf(1));//0
console.log(arr.indexOf(2));//1
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(4));//-1

該方法返回某個元素在陣列中的位置。
返回元素在陣列中的位置，若沒檢索到，則返回 -1。
array.indexOf(item,start)
引數	描述
item	必須。查詢的元素
start	可選。規定檢索的位置，它的合法取值是 0 到 stringObject.length - 1
================================

字串的indexOf和陣列的indexOf用法一致的哈
字串的indexOf和陣列的indexOf用法一致的哈
字串的indexOf和陣列的indexOf用法一致的哈

 

<template>
  <view>
     <view class="deom-flex">
         <view class="defa" :class="{'active': rSelect.indexOf(index)!=-1}"
            v-for="(value,index) in infoArr" 
            :key="index" @tap="tapInfo(index)">
              {{value.name}}
         </view>
     </view>
  </view>
</template>

<script>
export default {
 data(){
   return{
      infoArr:[{name:"直播"},{name:"視訊"},{name:"手遊"}],
       rSelect:[]
  }
},
methods:{
	tapInfo(e) {
		console.log(this.rSelect )//是陣列，陣列也有indexOf
		if (this.rSelect.indexOf(e) == -1) {
			console.log(e)//列印下標
			this.rSelect.push(e);//選中新增到數組裡
		} else {
			this.rSelect.splice(this.rSelect.indexOf(e), 1); //取消
		}
	}
},
}
</script>

<style scoped>
.deom-flex{
  display: flex;
}
.defa{
	width: 100rpx;
	height: 50rpx;
	margin-right: 10rpx;
}
.active{
	width: 100rpx;
	height: 50rpx;
	color: white;
	border: 1px solid #e5e5e5;
	background-color: #ff5d00;
}
</style>