uni-app实现点击显示隐藏列表,兼容微信小程序

news2024/9/19 22:19:41

效果: 

<view class="list-item" v-for="(item,index1) in listData" :key="index1">
				<view class="item-title" @click="item.content.length>0?handleToggle(item,index1):''">
					<view class="">{{item.title}}</view>
					<u-icon :name="item.isToggle ? 'arrow-right' : 'arrow-down'"></u-icon>
				</view>
				<view class="item-content" v-show="!item.isToggle">
					<view class="content-sel" v-for="(c,index2) in item.content" :key="index2">
						{{c.title}}
					</view>
				</view>
				
</view>

 

listData:[
					{
						title:"新疆",
						isToggle:false,
						content:[
							{title:"新疆大明矿业1"},
							{title:"新疆大明矿业2"}
						],
					},
					{
						title:"山东",
						isToggle:false,
						content:[
							{title:"山东矿业1"},
							{title:"山东矿业2"}
						],
					}
],
handleToggle(item,index1){
	item.isToggle = !item.isToggle;
	console.log(item.isToggle,"item.isToggle")
}

小程序打印的结果:值一直为true

 

如果你试过v-if不生效,又试了v-show,还是不行!!千万不要着急!

不是自己写的不对,而是uni-app和微信小程序修改值的方式不一致造成的。反正就是不承认是自己的问题。

其实解决的办法也很简单,就是要兼容两端,写出符合让两端都适合的代码 。

既然这样直接修改值不行,那就从根本出发。

handleToggle(item,index1){
	// item.isToggle = !item.isToggle;
	this.listData.forEach((item,index)=>{
		if(index1 === index){
			item.isToggle = !item.isToggle;
		}
	})
	console.log(item,"item.isToggle")
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/948689.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Ansible学习笔记7

user模块&#xff1a; user模块用于管理用户账户和用户属性。 如果是windows要换一个win_user模块。 创建用户&#xff1a;present&#xff1a; [rootlocalhost ~]# ansible group1 -m user -a "nameaaa statepresent" 192.168.17.106 | CHANGED > {"ansi…

链表(详解)

一、链表 1.1、什么是链表 1、链表是物理存储单元上非连续的、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表的指针地址实现&#xff0c;有一系列结点&#xff08;地址&#xff09;组成&#xff0c;结点可动态的生成。 2、结点包括两个部分&#xff1a;&#x…

骨传导耳机有什么副作用? 骨传导耳机对身体有损伤吗

根据目前的科学研究和经验&#xff0c;骨传导耳机被认为是相对安全的使用设备&#xff0c;不会引起副作用&#xff0c;也不会对身体造成损伤&#xff0c;相比会对我们的耳朵听力起到一定的保护作用。 但是&#xff0c;个体差异和特殊情况可能会影响人们对骨传导耳机的感受与反应…

成集云 | 抖店客户静默下单催付数据同步钉钉 | 解决方案

源系统成集云目标系统 方案介绍 随着各品牌全渠道铺货&#xff0c;主播在平台上直播时客户下了订单后不能及时付款&#xff0c;第一时间客户收不到提醒&#xff0c;不仅造成了客户付款率下降&#xff0c;更大量消耗了企业的人力成本和经济。而成集云与钉钉深度合作&#xff0…

【C++实战】C++实现贪吃蛇(含源代码)—基于easyx图形库

食用指南&#xff1a;本文在有C基础的情况下食用更佳 &#x1f340;本文前置知识&#xff1a;C基础 ♈️今日夜电波&#xff1a;toge—あよ 0:36 ━━━━━━️&#x1f49f;──────── 4:03 &a…

springboot整合jquery实现前后端数据交互

一 实施逻辑 1.1 前端 <!doctype html> <html lang"en"><head><meta charset"UTF-8"><meta name"Generator" content"EditPlus"><meta name"Author" content""><meta n…

Centos7 |Canal Admin搭建Canal Server集群|

一: 使用CanalAdmin来搭建一个canal集群 1.1 环境规划 服务名称|主机节点 机器IP 节点 备注 canal admin | docker0 192.168.1.100 192.168.1.100:8888 canal admin 机器 canal server 1 | docker1 192.168.1.101 192.168.1.100:8888 canal se…

Kafka3.0.0版本——Leader Partition自动平衡

目录 一、Leader Partition自动平衡的概述二、Leader Partition自动平衡的相关配置参数三、Leader Partition自动平衡的示例 一、Leader Partition自动平衡的概述 正常情况下&#xff0c;Kafka本身会自动把Leader Partition均匀分散在各个机器上&#xff0c;来保证每台机器的读…

Mac“其他文件”存放着什么?“其他文件”的清理方法

很多Mac用户在清理磁盘空间时发现&#xff0c;内存占用比例比较大的除了有iCloud云盘、应用程序、影片、音频、照片等项目之外&#xff0c;还有一个“其他文件”的项目磁盘占用比也非常大&#xff0c;想要清理却无从下手。那么Mac“其他文件”里存放的是什么文件&#xff1f;我…

HBuilderX修改manifest.json设置,解决跨域问题(CORS、Cross-Origin)

搭建一个前台uniapp&#xff0c;后台springboot的开发环境时&#xff0c;遇到了跨域问题。 console提示错误信息&#xff1a; Access to XMLHttpRequest at http://10.0.180.203/api/cms/getAdList?apId1 from origin http://localhost:8080 has been blocked by CORS policy…

常用框架分析(7)-Flutter

框架分析&#xff08;7&#xff09;-Flutter 专栏介绍Flutter核心思想Flutter的特点快速开发跨平台高性能美观的用户界面 Flutter的架构框架层引擎层平台层 开发过程使用Dart语言编写代码编译成原生代码热重载工具和插件 优缺点优点跨平台开发高性能美观的用户界面热重载强大的…

pinia——添加插件——基础积累

问题&#xff1a;是否给pinia添加过插件&#xff1f;具体添加的方式是什么&#xff1f; 在pinia中&#xff0c;我们可以为仓库添加插件&#xff0c;通过添加插件能够扩展以下的内容&#xff1a; 为 store 添加新的属性 定义 store 时增加新的选项 为 store 增加新的方法 包装现…

怎么传输大文件跨国,如何跨国快速传输大文件

在当前数字化时代的背景下&#xff0c;跨国传输大文件已经成为企业和个人工作中不可避免的挑战。尽管存在技术障碍和阻碍&#xff0c;但借助先进的技术和服务&#xff0c;我们仍能高效完成跨国大文件传输任务。接下来将介绍几种常见的跨国快速传输大文件的方法。 一、FTP文件传…

固定资产台账怎么管理

固定资产台账是指企业对固定资产进行登记、分类、统计和管理的账簿。固定资产管理系统是一款专业的固定资产管理软件&#xff0c;可以帮助企业实现资产全生命周期管理&#xff0c;包括资产采购、入库、领用、归还、维修、报废等环节。系统具有实时监控、预警提醒、报表分析等功…

PostgreSQL数据导入导出【亲测】有图有真相

pg_dump是用于备份PostgreSQL数据库的工具。它可以在数据库正在使用的时候进行完整一致的备份&#xff0c;并不阻塞其它用户对数据库的访问。 有图有真相 文章目录 导出导入压缩方法 导出 pg_dump -h 127.0.0.1 -p 5432 -U readuser mydatabase > dum.sql导入 1、导入整个…

函数和方法回顾、cbv源码分析、APIView执行流程分析、序列化组件介绍、序列化组件快速使用之序列化、常用字段类和参数、序列化组件之校验

一 函数和方法回顾 函数和方法-函数:使用def关键字定义的函数,有几个参数&#xff0c;就要传几个参数&#xff0c;不能多&#xff0c;不能少-----》按位置传&#xff0c;按关键字传-方法&#xff1a;定义在类内部&#xff0c;可以自动传值的函数称之为方法---》绑定给对象的方…

vue3+ts+tinynce在富文本编辑器菜单栏实现下拉框选择

实现效果 代码&#xff1a; <script lang"ts" setup> import Editor from tinymce/tinymce-vue import tinymce from tinymce; import { getIndicator } from /api/data-assets/data-dictoryimport {computed, ref} from "vue"; const props defin…

Linux centos7 bash编程——-求质数和

训练项目&#xff1a;使用函数求质数和。 定义一个函数IsPrime()&#xff0c;据此判断一个数是否为质数 由用户输入一个整数&#xff0c;求出比此数大的两个最小质数之和。 一、解决思路: 1.先在键盘上输入一个整数 2.求出比此数大的最小质数 3.再求出比此质数大的另一个…

【word技巧】word隐藏文字的方法

Word文件中有些内容想要隐藏&#xff0c;该如何隐藏&#xff1f;今天分享几个方法给大家 方法一&#xff1a; 最简单的方法&#xff0c;将字体颜色与背景颜色设置为一致的&#xff0c;这样就达到了隐藏的效果&#xff0c;选中文字再修改颜色就可以恢复字体 方法二&#xff1a…