思路
定义一个数组来记录被点击的元素 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>
uni-app选中状态并改变颜色