uni-app选中状态并改变颜色

思路    
定义一个数组来记录被点击的元素  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>

posted @   何人陪我共长生  阅读(11302)  评论(0编辑  收藏  举报
编辑推荐:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
点击右上角即可分享
微信分享提示