思路
定義一個數組來記錄被點擊的元素 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>
