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;希望能够帮…
阅读更多...
代码随想录算法训练营第一天|704.二分查找、27.移除元素

代码随想录算法训练营第一天|704.二分查找、27.移除元素

题目 704. 二分查找 相关企业 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -1。 示例 1: 输入: nums [-1,0,3,5,9,12], tar…
阅读更多...
标准C库函数之perror()、strerror()，以及他们之间各种的优缺点（打印错误信息）

标准C库函数之perror()、strerror()，以及他们之间各种的优缺点（打印错误信息）

标准C库函数之perror()、strerror()&#xff0c;以及他们之间各种的优缺点&#xff08;打印错误信息&#xff09; 前言 如果&#xff0c;想要深入的学习标准C库中perror、strerror函数&#xff0c;还是需要去自己阅读Linux系统中的帮助文档。 具体输入命令&#xff1a; man 3…
阅读更多...
网络编程作业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;促进…
阅读更多...
堆排序实现

堆排序实现

在了解堆的一些性质后&#xff0c;我们可以根据这些性质来实现一个较优的算法&#xff0c;也就是堆排序。 堆排序&#xff0c;顾名思义就是排序&#xff0c;其运用到堆的各种性质。首先我们要创建一个堆&#xff0c;在原有数组上进行向上或者向下调整使其变成一个堆。那么这时…
阅读更多...
typedef的详细理解

typedef的详细理解

目录 1.typedef对整型指针进行重命名 2.typedef对数组指针进行重命名 3.typedef对函数指针进行重命名 总结&#xff1a;所有重新命名的函数名必须写在*号旁边。 1.typedef对整型指针进行重命名 代码如下&#xff1a; typedef int* pint; int main() {int* p NULL;pint p…
阅读更多...
Python内置模块

Python内置模块

目录 什么是模块 模块分类 通过模块创建者分类 系统内置模块 第三方模块 在线安装 离线安装 模块导入 math和random模块介绍 math模块 random模块 什么是模块 在我们编写程序时&#xff0c;需要导入包。例如随机数的产生&#xff0c;需要import random。import XXX&…
阅读更多...
计算机基础专升本笔记-汇总笔记（三）常用文件格式

计算机基础专升本笔记-汇总笔记（三）常用文件格式

计算机基础专升本笔记-汇总笔记&#xff08;三&#xff09;常用文件格式 一、文本文件格式 扩展名&#xff08;后缀名&#xff09;文件类型docxWord2010文档dotxWord2010模版xlsxExcel2010文档xltxExcel2010模版pptxPower Point 演示文稿potxPower Point 2010模版ppsxPower P…
阅读更多...
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;主要有管理员、房东、用户三个角色 管理员可以在线查看系统已有的人中心、房屋类型管理、房屋信息…
阅读更多...
在 Android 中使用 Kotlin 调用动态库

在 Android 中使用 Kotlin 调用动态库

在 Android 开发中&#xff0c;有时候需要使用原生代码来执行一些特定的任务&#xff0c;比如高性能计算、访问硬件或者使用现有的 C/C 库。通常&#xff0c;这样的原生代码会被编译成动态库&#xff08;.so 文件&#xff09;&#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核…
阅读更多...
面试经典150题(105-107)

面试经典150题(105-107)

leetcode 150道题 计划花两个月时候刷完之未完成后转&#xff0c;今天&#xff08;第2天&#xff09;完成了3道(105-107)150 105.&#xff08;191. 位1的个数&#xff09;题目描述&#xff1a; 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&am…
阅读更多...
simplex算法的代码实现

simplex算法的代码实现

def pivot(N, B, A, b, c, v, l, e):N对应非基本元变量下标,B对应基本元变量下标,A对应非基本元在约束方程组中的系数相反数形成的矩阵,b对应约束条件中小于等于号右边的数值集合,c对应目标函数中变量系数形成的集合,v对应当前目标函数的取值,l对应转出变量下标在B中的位置，e…
阅读更多...
最新文章

Copyright @ 2022~2023