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>
作者:流年少年
出处:https://www.cnblogs.com/ishoulgodo/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/ishoulgodo/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

支付宝

微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体