vue入门实战(二)父子组件显示,参数传递
经过上次的写法,我们已经写出每个list项,现在要在每个父组件下面加入自己的子项
一、新建子组件:
smallItem.vue:
<script>
export default{props:['text','id','status'] //父组件传来的参数
}
</script>
<template>(...html代码...)<input class="item_child_input form-control" :value=text>//这里的text就是props传进来的text
</template>
二、在父组件里引入子组件:
item.vue:
<script>import smallItem from './smallItem.vue' //引入子组件export default{components:{smallItem //声明组件}}
</script>
<template><div class="children_div" v-if="IsOpen"> //循环调用<smallItem v-for="child in children" :key="child.id" :status=child.status :text=child.text :id=child.id></smallItem></div>
</template>
注意:
1.循环时在v-for后面要加:key,不然会报错
2.:id写在最后
3.样式调整:
由于vue采用flex布局,有时会出现元素错乱的情况,这里我在index.html里加入了一句样式
<style>#app{grid-template-columns: 1fr;}
</style>
呈现效果:

大家可以看一下dom的渲染:

三、加入事件
在子组件里,我们加入了一个点击事件:
smallItem.vue:
methods:{Check(event){this.checkStatus = this.checkStatus == 0 ? 1 : 0;}},
(这里本来是命名为status,但vs提示说status被弃用,我猜应该是status是vue关键字,于是换了一个名字checkStatus)
开始测试,触发Check事件发现,控制台报错说this里面的变量是不允许被set的:
TypeError: ‘set’ on proxy: trap returned falsish for property ‘checkStatus’
这里的checkStatus当然就是props里面的变量,是不允许被改变的;
于是在本组件里定义一个自己的变量:
data(){return{checkStatus:this.checkStatus}}
这时的this.checkStatus就变成了我们重新定义的这个变量,就可以赋值了
实现效果:
点击子组件的对号小图标,记录为已完成
这里发现了一个问题,this.checkStatus在下次的调用被改回来了,我想可能是data里的return没有return我赋的值,这里暂时还不知道怎么解决,明天再看
相关文章:
vue入门实战(二)父子组件显示,参数传递
经过上次的写法,我们已经写出每个list项,现在要在每个父组件下面加入自己的子项 一、新建子组件: smallItem.vue: <script> export default{props:[text,id,status] //父组件传来的参数 } </script> <template>…...
【Linux】Ubuntu:安装系统后配置
hostname:更改主机名 打开终端。 使用hostnamectl命令更改主机名。 sudo hostnamectl set-hostname 新的主机名你可以使用hostnamectl 命令来验证更改是否成功: hostnamectlChrome:更换默认浏览器 以下是从 Ubuntu 中移除预装的 Snap 版 Fi…...
springboot-查看版本和版本所需JDK
文章目录 访问spring管网查看springboot 项目查看当前版本查看版本所需JDK 访问spring管网 https://spring.io/ 查看springboot 项目 查看当前版本 点击调整到参考文档中去… 查看版本所需JDK...
fuxa搭建与使用(web组态)
1. 安装Node.js -> npm安装 参考网址:https://blog.csdn.net/WHF__/article/details/129362462 一、安装运行 C:WINDOWSsystem32>node -v v20.17.0 C:WINDOWSsystem32>npm -v 10.8.2 二、环境配置 在安装路径(D:Program_Files odejs&#x…...
中间件--MongoDB部署及初始化js脚本(docker部署,docker-entrypoint-initdb.d,数据迁移,自动化部署)
一、概述 MongoDB是一种常见的Nosql数据库(非关系型数据库),以文档(Document)的形式存储数据。是非关系型数据库中最像关系型数据库的一种。本篇主要介绍下部署和数据迁移。 在 MongoDB 官方镜像部署介绍中ÿ…...
C语言期末考试——常见考题(模拟考)
目录 一、填空题(每空2分,共 20 分) 二、选择题(每题2分,共26分) 三、编程题(第1题6分,其余题目每题10分) !!!需要答案的可以私信&…...
流量过滤与路径转发控制
1,策略路由 PBR基本概念: 策略路由,使网络设备不仅能够基于报文的目的IP地址进行数据转发,也能基于其他元素进行转发,比如源IP地址、MAC地址 可以使用ACL匹配特定的报文,针对该ACL进行PBR部署 PRB策略的…...
Ungoogled Chromium127编译指南 Windows篇 - 获取源码(七)
1. 引言 在完成所有必要工具的安装和配置后,我们进入了Ungoogled Chromium编译过程的第一个关键阶段:获取源代码。本文将详细介绍如何正确获取和准备Ungoogled Chromium的源代码,为后续的编译工作打下基础。 2. 准备工作 2.1 环境检查 在…...
k8s 之 StatefulSet
深入理解StatefulSet(一):拓扑状态 k8s有状态与无状态的区别 无状态服务:deployment Deployment被设计用来管理无状态服务的pod,每个pod完全一致.什么意思呢? 无状态服务内的多个Pod创建的顺序是没有顺序的. 无状态服务内的多…...
iPhone 17 Air基本确认,3个大动作
近段时间,果粉圈都在讨论一个尚未发布的新品:iPhone 17 Air,苹果又要来整新活了。 从供应链消息来看,iPhone 17 Air本质上是Plus的替代品,主要是在维持“大屏”这一卖点的同时,增加了“轻薄”属性ÿ…...
鸿蒙实现应用通知
目录: 1、应用通知的表现形式2、应用通知消息的实现1、发布普通文本类型通知2、发布进度类型通知3、更新通知4、移除通知 3、设置通知道通展示不同形式通知4、设置通知组5、为通知添加行为意图1、导入模块2、创建WantAgentInfo信息3、创建WantAgent对象4、构造Notif…...
ElasticSearch常见的索引_集群的备份与恢复方案
方案一:使用Elasticsearch的快照和恢复功能进行备份和恢复。该方案适用于集群整体备份与迁移,包括全量、增量备份和恢复。 方案二:通过reindex操作在集群内或跨集群同步数据。该方案适用于相同集群但不同索引层面的迁移,或者跨集…...
vue图片之放大、缩小、1:1、刷新、左切换、全屏、右切换、左旋咋、右旋转、x轴翻转、y轴翻转
先上效果,代码在下面 <template><!-- 图片列表 --><div class"image-list"><img:src"imageSrc"v-for"(imageSrc, index) in images":key"index"click"openImage(index)"error"handleI…...
Docker多架构镜像构建踩坑记
背景 公司为了做信创项目的亮点,需要将现有的一套在X86上运行的应用系统迁移到ARM服务器上运行,整个项目通过后端Java,前端VUEJS开发通过CICD做成Docker镜像在K8S里面运行。但是当前的CICD产品不支持ARM的镜像构建,于是只能手工构…...
“pinn是无网格的”???
“pinn是无网格的”??? PINN,即物理信息神经网络(Physics-Informed Neural Networks),是一种将物理定律作为先验知识整合到神经网络训练过程中的方法。它之所以被称为“无网格”的,…...
换一个ip地址是什么意思?换一个网络ip地址会变吗
在网络的世界里,IP地址如同每台设备的“身份证”,是确保网络信息能够准确传输到指定目标的关键。然而,在某些情况下,我们可能需要更换这个“身份证”,也就是更换IP地址。那么,换一个IP地址究竟是什么意思&a…...
JavaWeb学习--cookie和session,实现登录的记住我和验证码功能
目录 (一)Cookie概述 1.什么叫Cookie 2.Cookie规范 3.Cookie的覆盖 4.cookie的最大存活时间 (Cookie的生命) (二) Cookie的API 1.创建Cookie:new 构造方法 2.保存到客户端浏…...
深度学习:基于MindSpore的极简风大模型微调
什么是PEFT?What is PEFT? PEFT(Parameter Efficient Fine-Tuning)是一系列让大规模预训练模型高效适应于新任务或新数据集的技术。 PEFT在保持大部分模型权重冻结,只修改或添加一小部份参数。这种方法极大得减少了计算量和存储开销&#x…...
【LeetCode力扣热题100】【LeetCode 1】两数之和
方法一:暴力循环 两层循环,遍历所有的组合,直到满足条件,返回结果。 class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {for(int i0; i<nums.size()-1 ;i){for(int j i1; j<…...
定制链接类名,两类跳转传参,vue路由重定向,404,模式设置
router-link-exact-active 和 router -link-active两个类名都太长,可以在router路由对象中定制进行简化 // index.js// 路由的使用步骤 52 // 1.下载 v3.6.5 // 2.引入 // 3.安装注册Vue.use(Vue插件) // 4.创建路由对象 // 5.注入到new Vue中,建立关联…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件
在选煤厂、化工厂、钢铁厂等过程生产型企业,其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进,需提前预防假检、错检、漏检,推动智慧生产运维系统数据的流动和现场赋能应用。同时,…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中,push 和 present 是两种不同的视图控制器切换方式,它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文通过代码驱动的方式,系统讲解PyTorch核心概念和实战技巧,涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...
软件工程 期末复习
瀑布模型:计划 螺旋模型:风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合:模块内部功能紧密 模块之间依赖程度小 高内聚:指的是一个模块内部的功能应该紧密相关。换句话说,一个模块应当只实现单一的功能…...
《信号与系统》第 6 章 信号与系统的时域和频域特性
目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...
