关于v-model应用
作为一个刚接触前端的小白,今天vue脚手架在写作业,发现v-model真的好用
我们写的作业,如图:
由于我们只学习了父传子和子传父,爷孙和兄弟之间还没学,所以只能用我们所学的知识来写。
我刚开始就是用App.vue传给mymiddlelist.vue(里面放的结构就是ul),然后再传给mymiddle.vue(里面放的结构就是li),就是一层一层向下传,很麻烦。。。
1.先把每个组件之间的关系连接好,这个我就不多说了,直接从传数据开始
App.vue中的代码
因为要在App.vue里面更改数据。所以我直接把数据写在App.vue了
2.接收App.vue传的数据,在mymiddlelist.vue对数据进行遍历循环
mymiddlelist.vue中的代码
3.对数据进行渲染
mymiddle.vue中的代码
这就是渲染好的页面,如果进行勾选,按照普通的方法我们需要在App.vue中定义一个函数,在把这个函数一层一层的传给mymiddle.vue,获取id,再传给App.vue
如代码:
App.vue
勾选checktode(id) {this.list.forEach((item) => {if (item.id === id) {item.done = !item.done;}});}
我想了想既然name都能渲染过来,那id也肯定能渲染过来,所以想起v-model这个双向绑定,直接让v-model接收数据里面的done值不就行了
<input type="checkbox" v-model="todo.done" />
页面改变数据也改变,数据改变页面也改变, 所以就不用再子传父传父了,一个指令就完事。。。
关于v-model应用相关推荐
- 什么是V Model(V模型)
v-model是一种软件生存期模型,由Paul Rook在1980年率先提出的,在1990年出现在英国国家计算中心的出版物中,旨在提高软件开发的效率和有效性,是我们熟知的瀑布模型的一种改进,瀑布模型( ...
- 【全文翻译】ML-Leaks: Model and Data Independent Membership Inference Attacks and Defenses on Machine.....
ML泄漏:基于机器学习模型的模型和数据无关的成员推理攻击与防御 I. INTRODUCTION II. PRELIMINARIES(准备工作) A. Membership Inference Agai ...
- backbone学习总结(二)
今天来看下backbone的路由控制的功能.其实个人感觉backbone,模块就那么几个,熟悉它的框架结构,以及组成,就差不多. 废话不多说,我们来看看还剩下的功能. 关于路由和历史管理 通过 Bac ...
- Backbone学习日记[1]:感性认识
2019独角兽企业重金招聘Python工程师标准>>> 使用backbone.js的意义是什么呢? Backbone将数据呈现为模型, 你可以创建模型.对模型进行验证和销毁,甚至将它 ...
- 七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理
系列文章 七天学会ASP.NET MVC (一)--深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)--ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)- ...
- yii 全选 php,yii2中gridview使用技巧小结(四)——全选等批量操作
在用gridview时,大家都注意到了,列表的开头有现成的复选框,这肯定是批量操作中用到的,今天就来介绍一下,gridview中的批量操作,简直简单的不行,效果图如下: 前端页面只需要改这几个地方即可 ...
- 【深度学习】Ivy 开源框架,深度学习大一统时代到来?
它来了,它带着统一主流深度学习框架的接口来了.最近,有一个开源的框架:IVY,它将几个主流的深度学习框架都做了一个统一的封装,包括 PyTorch.TensorFlow.MXNet.Jax 和 Num ...
- ElementUI弹出新增窗口
新建按钮绑定单击事件,对应的处理函数为handleCreate <el‐button type="primary" class="butT" @click ...
- easyui根据select下拉框内容更新表单内容_10、表单与v-model
目标: 学会在 表单类 元素上使用 v-model . v-model作用:用于在 表单类 元素上实现双向绑定. 一.input 和 textarea <div id="app&quo ...
- 【jquery模仿net控件】初步GridView模型实现,及其简单应用
最近日子不好过,主要原因是要毕业了,学校那边的毕业论文让人很头痛,就跟写八股文似的,个人非常头疼并且厌恨这种 对我无意义的东西,哎!!!体制啊,既然无法改变,何不将之做好呢!!!对,于是我还是不想写论 ...
最新文章
- (剑指Offer)面试题54:表示数值的字符串
- dojo从asp.net中获取json数据
- mysql innodb引擎丢失_【MySQL】InnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据...
- NET Core微服务之路:SkyWalking+SkyApm-dotnet分布式链路追踪系统的分享
- MacOS中Nginx的安装「借助Homebrew」
- 蠕虫mysql_mysql蠕虫复制基础知识点
- on_mouse OpenCV 获得矩形区域
- 鸿蒙手机开发者活动,华为 12 月16 日举行鸿蒙 2.0 手机开发者 Beta 活动
- putty使用ssh登录时出现Access denied
- java new什么意思_java里的new到底是什么意思?
- excel打不开html超链接,mac excel打不开超链接
- javaWeb项目加入IP黑白名单
- sudo apt-get install package时出现E:无法定位软件包
- 他是阿里顶尖科学家,扛起国产分布式数据库大旗,性能超Oralce 20倍!
- cpp 读取txt文件
- java中事件监听是什么意思_Java的事件监听器学习心得
- 免费远程控制软件新功能
- 靠追热点出圈,网易传媒打造“爆款制造机2.0”
- 安装Adobe After Effects(AE)的时候卡在登陆界面?
- EMV技术学习和研究(五)脱机数据认证之DDA