Vue基础练习 组件之间数据传递

父→子：在子组件注册时写入props，并指定验证要求，父组件时使用v-bind绑定传入数据

	 //父组件：<Menu class="Menu" :MenuList="MenuList"  :showUnderLine="showUnderLine"></Menu>data(){return{showUnderLine:true,MenuList:['时间是什么?','时间性质','大尺度时间','精密时间','关于时间的传说','时间简史'],}}//子组件Menu ：props: {MenuList: Array,showUnderLine: {type: Boolean,default: false}},

子→父：子组件将要渲染的数据绑定触发事件，将数据在事件函数中通过this.$emit(“父组件函数名”，数据)将数据传给父组件；

//父组件，绑定自定义事件jumpTo等待触发：<Menu @jumpTo="jumpTo"></Menu>methods:{jumpTo(index){this.$router.push({path:"/MenuPage"+index})}},//子组件Menu ,先在标签上绑定事件，再在函数中传值：jumpTo(index){this.$emit('jumpTo', index)},

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><body><div id="app"><h2>信息:{{message_now}}</h2><input v-model="message_now" v-focus><br><button @click="addObv()">添加观察者</button><br><button @click="publish_message()">发布</button><ul><li v-for="(item,index) in observers"  :key="item.id"><h2>观察者姓名{{item.name}}</h2><h3>观察者信息{{item.message}}</h3></li></ul></div>
</body>
<script>new Vue({el:'#app',data() {return {message_now:'',observers:[{name:'',message:'',getNewMessage:function(){this.message=message_now}}] }},methods: {addObv:function(){const observers={name:'obv1',message:this.message};this.observers.push(observer);},publish_message:function(){this.observers.forEach(observer=>{observer.item='obv1',observer.message=this.message_now})}},})
</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body><div id="app"><h2 v-if="isLogin">已登录</h2><a @click="login()">登录</a><a @click="exit()">注销</a></div><script>new Vue ({el:'#app',data:function(){return{isLogin:false}},methods:{login:function () {this.isLogin=true},exit:function () {this.isLogin=false}}})</script></body>
</html>

超级难的组件题

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.son {width: 250px;height: 250px;}.head {width: 250px;height: 50px;text-align: center;line-height: 50px;}tr {height: 40px;cursor: pointer;}th {border: 1px solid rgb(0, 0, 0);border-collapse: collapse;}.table {width: 250px;display: flex;}.table_item {flex: 1;border: 1px solid;text-align: center;}.right {width: 250px;height: 250px;position: absolute;right: 0;top: 0;background-color: red;}
</style><body><div id="app">课程:<input type="text" v-model="course"><br>日期:<input type="text" v-model="date"><br>时长:<input type="text" v-model="duration"><br><button @click="add">add</button><div class="son"><div class="head">今日学习进程</div><div class="result"><my-table name="课程" date="日期" duration="时长" :data="obj" @delete-row="deleteRow"></my-table></div></div></div></body>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>Vue.component('my-table', {props: {name: String,date: String,duration: String,data: Array},template: `<div><div class="table"><div class="table_item">{{name}}</div><div class="table_item">{{date}}</div><div class="table_item">{{duration}}</div><div class="table_item">操作</div></div><div v-for="(item, index) in data" :key="index" class="table"><div class="table_item">{{item.course}}</div><div class="table_item">{{item.date}}</div><div class="table_item">{{item.duration}}</div><div class="table_item"><button @click="deleteRow(index)">删除</button></div></div></div>`,methods: {deleteRow(index) {this.$emit('delete-row', index);}}})new Vue({el: '#app',data() {return {course: '',date: '',duration: '',obj: [],}},methods: {add() {if (this.course && this.date && this.duration) {this.obj.push({course: this.course,date: this.date,duration: this.duration});this.course = "";this.date = "";this.duration = "";}},deleteRow(index) {this.obj.splice(index, 1);}}});</script></html>

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

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

相关文章

Java项目：39 springboot007大学生租房平台的设计与实现

Java项目：39 springboot007大学生租房平台的设计与实现

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 系统有管理员、房东和用户 【主要功能】 1、后台&#xff1a;房源管理、信息审批管理、订单信息管理、房东管理、用户管理 2、前台&#xff1…
阅读更多...
学习总结——JMeter做http接口功能测试

学习总结——JMeter做http接口功能测试

JMeter对各种类型接口的测试 默认做接口测试前&#xff0c;已经给出明确的接口文档&#xff08;如&#xff0c;http://test.nnzhp.cn/wiki/index.php?doc-view-59&#xff09;&#xff1b;本地配好了JMeter 3.x的运行环境&#xff1b; 打开JMeter&#xff0c;添加一个线程组…
阅读更多...
TCP和UDP可以使用同一个端口号吗？

TCP和UDP可以使用同一个端口号吗？

TCP和UDP可以使用同一个端口号吗&#xff1f; 首先说答案&#xff1a;可以。怎么理解呢&#xff1f; 我想这个问题要从计算机网络通信谈起&#xff0c;学过计算机网络的同学&#xff0c;可能都还记得7层或者4层网络模型&#xff0c;TCP/UDP属于其中的传输层协议&#xff0c;在…
阅读更多...
浅析扩散模型与图像生成【应用篇】(七)——Prompt-to-Prpmpt

浅析扩散模型与图像生成【应用篇】(七)——Prompt-to-Prpmpt

7. Prompt-to-Prompt Image Editing with Cross Attention Control 本文提出一种利用交叉注意力机制实现文本驱动的图像编辑方法&#xff0c;可以对生成图像中的对象进行替换&#xff0c;整体改变图像的风格&#xff0c;或改变某个词对生成图像的影响程度&#xff0c;如下图所示…
阅读更多...
《程序员的职业迷宫：选择你的职业赛道》

《程序员的职业迷宫：选择你的职业赛道》

程序员如何选择职业赛道&#xff1f; 大家好&#xff0c;我是小明&#xff0c;一名在编程迷宫中探索的程序员。作为这个庞大迷宫的探险者&#xff0c;我深知选择适合自己的职业赛道有多么重要。今天&#xff0c;我将分享一些关于如何选择职业赛道的心得&#xff0c;希望能够帮…
阅读更多...
网络编程作业day6

网络编程作业day6

数据库操作的增、删、改完成 #include <myhead.h>//查询的回调函数 int callback(void* data,int count,char** argv, char** columnName) {//count是字段数//argv是字段内容//columnName是字段名称for(int i0;i<count;i) {printf("%s%s\n", columnName[…
阅读更多...
2024全国水科技大会暨新能源及电子行业废水论坛（十一）

2024全国水科技大会暨新能源及电子行业废水论坛（十一）

一、会议背景 为深入学习贯彻《中共中央、国务院关于全面推进美丽中国建设的意见》&#xff0c;全面贯彻实施《固体废物污染环境防治法》、《“十四五”全国城市基础设施建设规划》&#xff0c;推进我国污泥处理工程建设&#xff0c;提高处理产物资源化利用水平&#xff0c;促进…
阅读更多...
Python内置模块

Python内置模块

目录 什么是模块 模块分类 通过模块创建者分类 系统内置模块 第三方模块 在线安装 离线安装 模块导入 math和random模块介绍 math模块 random模块 什么是模块 在我们编写程序时&#xff0c;需要导入包。例如随机数的产生&#xff0c;需要import random。import XXX&…
阅读更多...
XGboost的整理

XGboost的整理

XGboost&#xff08;extreme gradient boosting&#xff09;:高效实现了GBDT算法并进行了算法和工程上的许多改进。 XGboost的思路&#xff1a; 目标&#xff1a;建立k个回归树&#xff0c;使得树群的预测尽量接近真实值&#xff08;准确率&#xff09;而且有尽量大的泛化能力…
阅读更多...
Java项目：39 springboot008房屋租赁系统

Java项目：39 springboot008房屋租赁系统

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 房屋租赁系统的设计基于现有的网络平台&#xff0c;主要有管理员、房东、用户三个角色 管理员可以在线查看系统已有的人中心、房屋类型管理、房屋信息…
阅读更多...
创建java项目

创建java项目

文章目录 一、安装idea二、创建一个java项目1.设置名称 项目路径 安装JDK&#xff08;自己选择一个位置存放JDK&#xff09;2.创建完成之后 在src文件夹下创package包 再在包下创建Class类3. hellojava类创建完成设置打印语句 输出HelloJava 一、安装idea 官网地址 二、创建一…
阅读更多...
不买后悔的阿里云服务器租用价格表_优惠活动整理_2024新版

不买后悔的阿里云服务器租用价格表_优惠活动整理_2024新版

2024阿里云服务器优惠活动政策整理&#xff0c;阿里云99计划ECS云服务器2核2G3M带宽99元一年、2核4G5M优惠价格199元一年&#xff0c;轻量应用服务器2核2G3M服务器61元一年、2核4G4M带宽165元1年&#xff0c;云服务器4核16G10M带宽26元1个月、149元半年&#xff0c;云服务器8核…
阅读更多...
使用Http请求下载文件带来的问题

使用Http请求下载文件带来的问题

java.io.IOException: Broken pipe 当使用http请求的方式将文件作为响应内容给浏览器&#xff0c;这个时候如果浏览器未开启自动下载(浏览器可能会终止这个tcp连接)&#xff0c;文件不会下载成功&#xff0c;但是这个时候请求已经到达服务器&#xff0c;如果这个时候&#xff0…
阅读更多...
Dynamo初学常识梳理（四）——Revit图元

Dynamo初学常识梳理（四）——Revit图元

希望想学 Dynamo 的小伙伴坚持住&#xff0c;每天积累一点点知识&#xff0c;Dynamo 你很快就能上手的&#xff01;Dynamo 并不是你想的那样难学哦&#xff01; 今天要讲的是如何从 Dynamo 中获取 Revit 的图元&#xff0c;这些节点很常用&#xff0c;不需要全背下来&#xff0…
阅读更多...
指针运算笔试题解析

指针运算笔试题解析

题目1&#xff1a; int main() { int a[5] { 1, 2, 3, 4, 5 }; int* ptr (int*)(&a 1); printf("%d %d", *(a 1), *(ptr - 1)); return 0; } ptr中存放了整个数组的地址&#xff0c;ptr是int*类型&#xff0c;&a1跳到5的地址后又被强制类…
阅读更多...
算法DFS 复习

算法DFS 复习

思路&#xff1a;for 代表的是每一位的纵向&#xff0c;数字变化&#xff0c;dfs 代表的是横向的&#xff0c;位置变化。vis 来做到每个枚举的数不重复&#xff0c;并且要在搜索前记录&#xff0c;搜索后还原。模拟该样例 dfs3 的时候是输出&#xff0c;dfs0&#xff0c;1&…
阅读更多...
【DAY05 软考中级备考笔记】线性表，栈和队列，串数组矩阵和广义表

【DAY05 软考中级备考笔记】线性表，栈和队列，串数组矩阵和广义表

线性表&#xff0c;栈和队列&#xff0c;串数组矩阵和广义表 2月28日 – 天气&#xff1a;阴转晴 时隔好几天没有学习了&#xff0c;今天补上。明天发工资&#xff0c;开心&#x1f604; 1. 线性表 1.1 线性表的结构 首先线性表的结构分为物理结构和逻辑结构 物理结构按照实…
阅读更多...
【LabVIEW FPGA】CIC滤波器

【LabVIEW FPGA】CIC滤波器

一、CIC滤波器应用概述 在通信数字信号上下变频时&#xff0c;经常会用到对数字信号的升采样和降采样&#xff0c;即通过CIC数字速率器实现变采样率。 二、滤波器IP 首先设置滤波器基本参数&#xff08;filter specification&#xff09; 滤波器类型&#xff08;Filter Type…
阅读更多...
uipath调用js代码

uipath调用js代码

1&#xff0c;调用js代码&#xff0c;不带参数&#xff0c;没有返回值 为了去掉按钮的disabled属性 function(){ document.getElementsByClassName(submitBtn)[0].removeAttribute(disabled); } 2&#xff0c;调用js代码&#xff0c;带参数&#xff0c;没有返回值 输入参数&a…
阅读更多...
【conda】实现conda环境迁移的4种方式

【conda】实现conda环境迁移的4种方式

文章目录 方案1: 使用conda pack制作压缩包并在目标环境解压使用方案2: 使用package列表文件重新创建conda环境方案3: scp将环境文件夹拷贝到目标主机上方案4: 通过--clone先克隆一个环境再conda pack打包迁移 方案1: 使用conda pack制作压缩包并在目标环境解压使用 适合离线环…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023