uniapp实战:父子组件传参之子组件数量动态变化

需求说明

    现有的设置单元列表,每个带有虚线加号的可以看做是一组设置单元,点击加号可以添加一组设置单元.点击设置单元右上角可以删除对应的设置单元.在这里插入图片描述

实现思路说明

    利用数组元素添加或是删除的方式实现页面数量动态变化.由于每个设置单元内容都相同所以单独封装了一个子组件.下面是实现过程:
父页面

<template><view class="out"><view class="content"><view class="setting"><setFriend class="addUnit" v-for="unitIndex in unitList" :unitList="unitList"></setFriend><view class="addUnitClass" @click="addUnit"><image class="add_unit_img" src="../../static/add_unit.png"></image></view></view></view></view>
</template><script>export default {data() {return {// 自定义数组,元素可以随便写unitList:[1,2,3]}},methods: {addUnit(){// 添加添加按钮,数组添加一个元素,元素内容可以任意this.unitList.push(1)}}}
</script><style lang="scss">uni-page-body,page {height:100%;background-color: rgb(242, 242,242);}.out{display: flex;justify-content: center;align-items: center;width: 90%;margin: auto;.content{width: 100%;// height: 400px;display: flex;justify-content: center;align-items: center;flex-direction: column;.setting{width: 100%;display: flex;justify-content: flex-start;align-items: center;flex-direction: row;flex-wrap:wrap;.addUnit{width: 50%;height: 150px;margin-bottom: 15px;}.addUnitClass{position: relative;top: 10px;margin-left: 7px;width: 45%;height: 150px;margin-bottom: 15px;background-color: white;display: flex;justify-content: center;align-items: center;border-radius: 5px;.add_unit_img{width: 80%;height: 80%;}}}}}		</style>

设置单元子组件

<template><view><view class="unit"><image class="close_img" src="../../static/close_button.png" @click="closeUnit"></image><view class="uni_item"><image class="upload_img" src="../../static/upload_img.png"></image></view></view></view>
</template><script>export default {name:"setFriend",data() {return {};},// 设置属性unitListprops:{unitList: {type: Array,default: [1,2],required: false}},methods:{closeUnit(){// 点击关闭按钮,数组减一处理if(this.unitList.length != 0){this.unitList.splice(0, 1);}}}}
</script><style lang="scss">uni-page-body,page {height:100%;background-color: rgb(242, 242,242);}.unit{width: 90%;height: 150px;background-color: white;margin-top: 9px;margin-left: 5px;border-radius: 5px;position: relative;left: 1px;.close_img{width: 20px;height: 20px;position: absolute;left:140px;top:-8px;}.uni_item{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;.upload_img{width:65px;height: 65px;margin-bottom: 10px;}}}}</style>

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

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

相关文章

高效备考2025年AMC8数学竞赛:2000-2024年AMC8真题练一练

如何提高小学和初中数学成绩&#xff1f;小学和初中可以参加的数学竞赛有哪些&#xff1f;不妨了解一下AMC8美国数学竞赛&#xff0c;现在许多小学生和初中生都在参加这个比赛。如果孩子有兴趣&#xff0c;有余力的话可以系统研究AMC8的历年真题&#xff0c;即使不参加AMC8竞赛…

YOLOv9大幅度按比例减小模型计算量!加快训练!

一、代码及论文链接&#xff1a; 代码链接&#xff1a;GitHub - WongKinYiu/yolov9: Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information 论文链接&#xff1a;https://github.com/WongKinYiu/yolov9/tree/main 二…

深入理解Nginx,腾讯T3大佬亲自讲解

开头 25岁那年&#xff0c;我从京东离职&#xff0c;入职百度。 在百度认识了当时的架构师久哥&#xff08;T9级别&#xff09;&#xff0c;因为他的一番话&#xff0c;彻底改变了我的职业生涯&#xff0c;短短三年的时间&#xff0c;我从一枚普通程序员成长为别人眼中的技术…

信号:pause、alarm、kill;第二个项目:基于Mplayer的视频播放器

我要成为嵌入式高手之2月29日Linux高编第十二天&#xff01;&#xff01; 学习笔记 信号 1、pause int pause(void); 功能&#xff1a;让进程睡眠直到接收到捕捉的信号才能继续向下执行 2、alarm unsigned int alarm(unsigned int seconds); 功能&#xff1a;定时secon…

02| JVM堆中垃圾回收的大致过程

如果一直在创建对象&#xff0c;堆中年轻代中Eden区会逐渐放满&#xff0c;如果Eden放满&#xff0c;会触发minor GC回收&#xff0c;创建对象的时GC Roots&#xff0c;如果存在于里面的对象&#xff0c;则被视为非垃圾对象&#xff0c;不会被此次gc回收&#xff0c;就会被移入…

深度学习500问——Chapter02:机器学习基础(1)

文章目录 前言 2.1 基本概念 2.1.1 大话理解机器学习本质 2.1.2 什么是神经网络 2.1.3 各种常见算法图示 2.1.4 计算图的导数计算 2.1.5 理解局部最优与全局最优 2.1.5 大数据与深度学习之间的关系 2.2 机器学习学习方式 2.2.1 监督学习 2.2.2 非监督式学习 2.2.3 …

TVM 和模型优化的概述(1)

文章目录 1. 从 Tensorflow、PyTorch 或 Onnx 等框架导入模型&#xff08;model&#xff09;。2.翻译成 Relay3. lower 到 张量表达式。4. 使用 auto-tuning 模块 AutoTVM 或 AutoScheduler 搜索最佳 schedule。5. 选择最佳配置进行模型编译。6. lower 到 TIR。7. 编译成机器码…

波奇学Linux:共享内存

进程通信的前提&#xff1a;不同的进程看到同一份的资源 直接原理:同一块物理内存映射到不同进程的共享区 共享内存拆解&#xff1a; 1.申请内存&#xff0c;通过页表映射到进程地址空间 2.返回首地址&#xff0c;便于进程利用 3.释放共享内存&#xff0c;去关联 4.内存的申请…

flex的5种常见使用

Flex 布局教程&#xff1a;语法篇 文章目录 一.基本概念二 例子 其实我每次记一个样式标签,都是根据英文来记,但是justify-content和align-items确实让我迷惑,这次我打算只记 justify-content属性定义了项目在主轴上的对齐方式,好好总结一下用法~ 一.基本概念 采用 Flex 布局…

SpringBoot 事务失效及其对应解决办法

简介 本文主要讲述Spring事务会去什么情况下失效及其解决办法 Spring 通过AOP 进行事务控制&#xff0c;如果操作数据库报异常&#xff0c;则会进行回滚&#xff1b;如果没有报异常则会提交事务&#xff1b;但是&#xff0c;如果Spring 事务失效&#xff0c;会导致数据缺失/重…

Quartz与Spring Task的区别

1、相同点&#xff1a; 两者均能实现定时调度任务 2、Quartz ① 默认多线程异步执行 ② 单个任务时&#xff0c;在上一个调度未完成时&#xff0c;下一个调度时间到时&#xff0c;会另起一个线程开始新的调度。业务繁忙时&#xff0c;一个任务会有多个调度&#xff0c;可能导…

DAY65: 图论入门797、200、695

深度优先搜索 深度优先搜索按照一个方向一直搜索直到截止&#xff0c;再回溯换搜索方向。 搜索方向&#xff0c;是认准一个方向搜&#xff0c;直到碰壁之后再换方向换方向是撤销原路径&#xff0c;改为节点链接的下一个路径&#xff0c;回溯的过程 因为需要回溯&#xff0c;…

【STM32】STM32学习笔记-独立看门狗和窗口看门狗(47)

00. 目录 文章目录 00. 目录01. WDG概述02. 独立看门狗相关API2.1 IWDG_WriteAccessCmd2.2 IWDG_SetPrescaler2.3 IWDG_SetReload2.4 IWDG_ReloadCounter2.5 IWDG_Enable2.6 IWDG_GetFlagStatus2.7 RCC_GetFlagStatus 03. 独立看门狗接线图04. 独立看门狗程序示例105. 独立看门…

简单排列组合题(python版)

文章预览&#xff1a; 题目解法一输出结果 解法二输出结果输出结果 题目 有四个数字:1,2,3,4能组成多少个互不相同且无重复的数字的三位数? 各式多少? 解法一 我们粗略看一下这个题既然我们要组成三位数&#xff0c;那我们就循环3层每一层出一个数&#xff0c;并且if语句判…

OD(12)之Mermaid思维导图(Mindmap)

OD(12)之Mermaid思维导图(Mindmap)使用详解 Author: Once Day Date: 2024年2月29日 漫漫长路才刚刚开始… 全系列文章可参考专栏: Mermaid使用指南_Once_day的博客-CSDN博客 参考文章: 关于 Mermaid | Mermaid 中文网 (nodejs.cn)Mermaid | Diagramming and charting tool…

postman传参与返回值切换为左右显示的操作

目录 第一步 点击“Settings”&#xff0c;在下拉框选择“Settings” 第二步 在默认打开的General页面&#xff0c;参照下图改动两处 第一步 点击“Settings”&#xff0c;在下拉框选择“Settings” 第二步 在默认打开的General页面&#xff0c;参照下图改动两处 附上修改后…

字符串函数strstr()详解

一、strstr()函数的作用 字符串函数 strstr() 是 C 语言的一个标准库函数&#xff0c;它的作用是在一个字符串中查找给定字符串的第一个匹配之处&#xff0c;并返回指向该字符串的指针。如果没有找到该字符串&#xff0c;则返回 NULL。1 二、strstr()函数的原型和参数 strst…

c语言求奇数分之一序列前N项和

本题要求编写程序&#xff0c;计算序列 1 1/3 1/5 ... 的前N项之和。 输入格式: 输入在一行中给出一个正整数N。 输出格式: 在一行中按照“sum S”的格式输出部分和的值S&#xff0c;精确到小数点后6位。题目保证计算结果不超过双精度范围。 输入样例: 23输出样例: …

opencv中的rgb转gray的计算方法

转换原理 在opencv中&#xff0c;可以使用cv2.cvtColor函数将rgb图像转换为gray图像。示例代码如下&#xff0c; import cv2img_path "image.jpg" image cv2.imread(img_path) gray_image cv2.cvtColor(image, cv2.COLOR_BGR2GRAY) mean gray_image.mean() pri…

【AI Agent系列】【MetaGPT多智能体学习】4. 基于MetaGPT的Team组件开发你的第一个智能体团队

本系列文章跟随《MetaGPT多智能体课程》&#xff08;https://github.com/datawhalechina/hugging-multi-agent&#xff09;&#xff0c;深入理解并实践多智能体系统的开发。 本文为该课程的第四章&#xff08;多智能体开发&#xff09;的第二篇笔记。主要是对MetaGPT中Team组件…