if - else 实现点击展开 / 折叠

news2024/11/14 13:58:07

             在前端开发过程中,我们经常需要使用到点击展开/折叠的按钮。

        此案例是一个数组嵌套数组的效果展示,使用的是v-if    else 来实现的展开效果。

一、实现方法

          if...else:当指定条件为真,if 语句会执行一段语句。如果条件为假,则执行另一段语句。

二、实现步骤

要实现点击展开的效果,我们需要做以下几个步骤:

        1.在HTML中定义一个按钮和需要展开或折露的内容

        2.使用JQuery选择器选中按钮,并绑定点击事件处理函数

        3.在点击事件处理函数中,切换内容的显示状态

①在view中添加如下代码
<template>
	<view style="">
		<view style="padding: 32rpx 0rpx 10rpx;border-top: 1px solid #E6E6E8; margin-top: 100rpx;">
			<!-- 绑定点击事件  @click="handleClick(index) -->
			<view v-for="(items, index) in positionData" style="padding: 32rpx; background-color: #fff;" :key="index"
				@click="handleClick(index)">
				<!-- 转动小图标 使用的时 if- else  -->
				<view class="flex">
					<view><text style="font-weight: bold;font-size: 30;">{{ items.mothes }}</text> 月</view>
					<u-icon v-if="!items.unfold" name="arrow-down-fill" size="10"></u-icon>
					<u-icon v-else name="arrow-up-fill" size="10"></u-icon>
				</view>
				<view v-if="items.unfold">
					<!-- 不能这样写 v-if 和 v-for同时写一个元素上 -->
					<view v-for="(item, index2) in items.data" class="flex-between"
						style="padding: 32rpx 0rpx;border-bottom: 1px solid #E6E6E8;" :key="index2">
						<view class="flex-colomn">
							<view style="color: #333333;font-size: 28rpx;font-weight: bold;">{{ item.status }}</view>
							<view style="color: #888889;font-size: 24rpx;">{{ item.time }}</view>
						</view>
						<view style="color: #222229;font-size: 32rpx; font-weight: bold;">{{ item.sasay }}</view>
					</view>
					<view>
					</view>
				</view>
			</view>
		</view>
		</view>
</template>

②在Js中添加
<script>
export default {
	data() {
		return {
			//数组嵌套数组
			positionData: [
				{
					id: '1',
					mothes: '11',
					allsasay: "10000",
					data: [{
						status: '微信充值',
						time: '2023-11-11 20:00',
						sasay: '+500',
					},
					{
						status: '微信充值',
						time: '2023-11-11 20:00',
						sasay: '+500',
					},{
						status: '微信充值',
						time: '2023-11-11 20:00',
						sasay: '+500',
					},{
						status: '微信提现',
						time: '2023-11-11 20:00',
						sasay: '+500',
					},{
						status: '微信充值',
						time: '2023-11-11 20:00',
						sasay: '+500',
					},
					],
					unfold: false //添加的元素
				},
			],

		}
	},
	methods: {
		//点击事件的方法 
		//.map()方法创建一个新数,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
		handleClick(index) {
			this.positionData = this.positionData.map((it, i) => {
				if (index === i) {
					return {
						...it, //展开运算符 【把it对象里面的属性全部列举在这里】
						unfold: !it.unfold
					}
				} else {
					return it
				}
			})
		}
	}
}
</script>
③css样式
<style>
	/* 背景颜色 */
page {
	background: #f5f5f5;
}
</style>

三、效果展示

四、小结

        1.当v-if 和 v-for 需要同时使用时,不可以写在一个标签上,需要写在不同的view上

        2.v-if指令用于条件性的渲染一块内容,这块内容只会在指令的表达式返回true值的时候被渲染。vue的列表渲染函数,函数内部都会进行一次if判断

        
        3.v-for指令是基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法,items是源数据数组或对象,而item则是被迭代的数组元素的别名。
        在使用v-for的时候,可以设置key值,并且保证每个key值是独一无二的。

        4.永远不要把v-if和v-for同时用在同一个元素上,(每次渲染都会先循环再进行条件判断)。


        5.可以在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环。

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

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

相关文章

2023/12/11 作业

1.思维导图 2.作业 成果&#xff1a; 第一个头文件 #ifndef TEST3GET_H #define TEST3GET_H #include <QWidget> #include<QMessageBox> QT_BEGIN_NAMESPACE namespace Ui { class test3get; } QT_END_NAMESPACE class test3get : public QWidget { Q_OBJE…

用docker创建jmeter容器,如何实现性能测试?

用 docker 创建 jmeter 容器, 实现性能测试 我们都知道&#xff0c;jmeter可以做接口测试&#xff0c;也可以用于性能测试&#xff0c;现在企业中性能测试也大多使用jmeter。docker是最近这些年流行起来的容器部署工具&#xff0c;可以创建一个容器&#xff0c;然后把项目放到…

chrome浏览器使用flash player

今天用chrome打开学校校园网&#xff0c;显示不出来成绩单提示如下&#xff1a; 结果下了也没用。 Chrome浏览器在2020年12月已经停止支持Flash Player插件&#xff0c;所以无法在Chrome浏览器上使用Flash Player。 使用其他浏览器 如果之前安装了Flash Player插件的小伙伴&…

多维时序 | MATLAB实现SAO-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现SAO-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现SAO-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现SAO-CNN-B…

关于引用unpkg.com的mars3d相关依赖文件报错无法请求的说明

问题来源&#xff1a; 1.关于引用unpkg.com的mars3d相关依赖文件报错无法请求的说明 说明&#xff1a; 1.最近npm、unpkeg都访问异常&#xff0c;可能是unpkg.com等国外的服务器不稳定导致的请求未响应。 解决方案&#xff1a; 1.请切换静态文件引入的方式请求相关资源。参…

Science Robotics 挖掘机升级智能机器人,充分使用当地材料自主搭建石墙和土墙

建筑业对人类生产力至关重要&#xff0c;但需要实质性创新来满足不断增长的需求并减少其对环境的严重影响。建筑业是世界上最大的经济部门之一&#xff0c;占全球国内生产总值的13%。推而广之&#xff0c;它几乎是所有其他行业的重要组成部分&#xff1a;建筑业负责运输和农业基…

定时补偿方案

1&#xff1a;需求描述 支持NVR升级后通道数变更&#xff0c;完成升级后&#xff0c;设备SDK上报通道数量给A平台&#xff0c;A平台将NVR通道数量同步给B平台&#xff0c;B平台自动调用C平台接口&#xff0c;同步通道数量给C平台&#xff0c;C平台重新生成通道序列号&#xff…

PHP 之道(PHP The Right Way 中文版)

PHP 之道&#xff08;PHP The Right Way 中文版&#xff09;

HeartBeat监控Mysql状态

目录 一、概述 二、 安装部署 三、配置 四、启动服务 五、查看数据 一、概述 使用heartbeat可以实现在kibana界面对 Mysql 服务存活状态进行观察&#xff0c;如有必要&#xff0c;也可在服务宕机后立即向相关人员发送邮件通知 二、 安装部署 参照章节&#xff1a;监控组件…

液态二氧化碳储存罐远程无线监测系统

二氧化碳强化石油开采技术&#xff0c;须先深入了解石油储层的地质特征和二氧化碳的作用机制。现场有8辆二氧化碳罐装车&#xff0c;每辆罐车上有4台液态二氧化碳储罐&#xff0c;每台罐的尾部都装有一台西门子S7-200 smart PLC。在注入二氧化碳的过程中&#xff0c;中控室S7-1…

租一台服务器多少钱决定服务器的价格因素有哪些

租一台服务器多少钱决定服务器的价格因素有哪些 大家好我是艾西&#xff0c;服务器这个名词对于不从业网络行业的人们看说肯定还是比较陌生的。在21世纪这个时代发展迅速的年代服务器在现实生活中是不可缺少的一环&#xff0c;平时大家上网浏览自己想要查询的信息等都是需要服…

terser

环境&#xff1a; 一、使用vueCli创建的项目的vue.config.js 添加terser配置 验证了在打包后生成的.js文件中确实没有了console.log() 这里的.js.map可以省略&#xff0c;公司里代码打包后就没有.js.map文件了 要配置下除去.js.map文件或者统一分到.map文件夹里 二、vite 安…

抓紧收藏!软考个税抵扣3600元详细操作流程

软考证书有很多项福利政策&#xff0c;“个税补贴 ”是很容易被忽略的一项&#xff0c;但其实这一项也是实打实的资金补贴。 持有软考证书可在线上申请&#xff0c;按照3600定额扣除。 具体操作流程&#xff0c;接下来详细说明。 01 政策依据 根据《个人所得税专项附加扣除暂…

极兔速递查询,极兔速递单号查询,筛选出指定派件员的单号

批量查询极兔速递单号的物流信息&#xff0c;并将指定派件员的单号筛选出来。 所需工具&#xff1a; 一个【快递批量查询高手】软件 极兔速递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;第一次使用的朋友记得先注册&#xff…

ThreadLocal 本地线程变量详解

概述 ThreadLocal 意为本地线程变量&#xff0c;即该变量只属于当前线程&#xff0c;对其他线程隔离 我们知道&#xff0c;一个普通变量如果被多线程访问会存在存在线程安全问题&#xff0c;这时我们可以使用 Synchronize 来保证该变量某一时刻只能有一个线程访问&#xff0c…

vector类

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟悉vector库 > 毒鸡汤&#xff1a;从人生低谷…

2-1基础算法-枚举/模拟

文章目录 1.枚举2.模拟 1.枚举 [例1] 特别数的和 评测系统 #include <iostream> using namespace std; bool pa(int x) {while (x) {if (x % 10 2 || x % 10 1 || x % 10 0 || x % 10 9) {return true;}else {x x / 10;}}return false; } int main() {int sum0;i…

设计模式——建造者模式(创建型)

引言 生成器模式是一种创建型设计模式&#xff0c; 使你能够分步骤创建复杂对象。 该模式允许你使用相同的创建代码生成不同类型和形式的对象。 问题 假设有这样一个复杂对象&#xff0c; 在对其进行构造时需要对诸多成员变量和嵌套对象进行繁复的初始化工作。 这些初始化代码…

育儿类App最佳广告变现方案及运营增长攻略 | TopOn变现干货

近年来&#xff0c;随着全球母婴、亲子及育儿产品的快速发展&#xff0c;移动互联网育儿App迎来了一次井喷式的发展&#xff0c;儿童数字广告支出成为了增长速度最快的细分市场。TopOn联合全球儿童安全广告平台Kidoz举办了一场线上分享会——育儿类App最佳变现解决方案及广告变…

算法——位运算

常见位运算总结 基础位运算 << >> ~与&&#xff1a;有0就是0或|&#xff1a;有1就是1异或^&#xff1a;相同为0&#xff0c;相异为1 / 无进位相加 给一个数n&#xff0c;确定他的二进制表示中的第x位是0还是1 让第x位与上1即可先让n右移x位&上一个1&#…