<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title> todolist删除</title>

     <link rel="stylesheet" href="test1.css">

     <script type="text/javascript" src="vue.js"></script>

 </head>

 <body>

 <div id="rooter">

     <input type="text" v-model="valueput"/>

     <button @click="handler">提交</button>

     <ul>

         <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index"

         @delete="handleDelete"></todo-item>

     </ul>

 </div>

 <script>

     var todoitem={

         props:["content","index"],  //将值从父组件来接听

         template:'<li @click="had">{{content}}</li>',

         methods:{

             had:function () {

                 this.$emit("delete",this.index);  //可以将值传给父组件

             }

         }

     };

     new Vue({

         el:'#rooter',

         data:{

             valueput:"",

             list:[],

             content:''

         },

         components:{

             'todo-item':todoitem

         },

         methods:{

             handler:function(){

                 this.list.push(this.valueput);

                 this.valueput="";

             },

             handleDelete:function(index){

                 this.list.splice(index,1);

             }

         }

     });

     console.log(1);

 </script>

 </body>

 </html>

父组件向子组件传递参数，通过属性的方式和props

子组件向父组件传递参数，通过发布的方式：this.$emit("",...............)

todolist---插入和删除----vue的更多相关文章

  1. 我的MYSQL学习心得（八） 插入 更新 删除

    我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...

  2. Entity Framework 6 Recipes 2nd Edition（10-9）译 -> 在多对多关系中为插入和删除使用存储过程

    10-9. 在多对多关系中为插入和删除使用存储过程 问题 想要在一个无载荷的多对多关系中使用存储过程(存储过程只影响关系的连接表) 解决方案 假设有一个多对多关系的作者( Author)表和书籍( B ...

  3. 与TableView插入、删除、移动、多选，刷新控件

    一.插入.删除.移动.多选 方法一: Cell的插入.删除.移动都有一个通用的方法,就是更新tableView的数据源,再reloadData,这样做实现上是简单一点,但是reloadData是刷新整 ...

  4. Java 集合与队列的插入、删除在并发下的性能比较

    这两天在写一个java多线程的爬虫,以广度优先爬取网页,设置两个缓存: 一个保存已经访问过的URL:vistedUrls 一个保存没有访问过的URL:unVistedUrls 需要爬取的数据量不大,对 ...

  5. 数据结构Java实现03----单向链表的插入和删除

    文本主要内容: 链表结构 单链表代码实现 单链表的效率分析 一.链表结构: (物理存储结构上不连续,逻辑上连续:大小不固定)            概念: 链式存储结构是基于指针实现的.我们把一个数据 ...

  6. 怎么用CorelDRAW插入、删除与重命名页面

    在绘图之前,页面的各种设置也是一项重要的工作,本文主要讲解如何在CorelDRAW中插入.删除.重命名页面等操作.在CorelDRAW的绘图工作中,常常需要在同一文档中添加多个空白页面,删除一些无用的 ...

  7. 二叉查找树的查找、插入和删除 - Java实现

    http://www.cnblogs.com/yangecnu/p/Introduce-Binary-Search-Tree.html 作者: yangecnu(yangecnu's Blog on ...

  8. [改善Java代码]频繁插入和删除时使用LinkedList

    一.分析 前面有文章分析了列表的表里方式,也就是“读”的操作.本文将介绍表的“写”操作:即插入.删除.修改动作. 二.场景 1.插入元素 列表中我们使用最多的是ArrayList,下面看看他的插入(a ...

  9. UITableView的编辑（插入、删除、移动）

    先说两个方法beginUpdates和endUpdates,几点注意事项: 一般我们把行.块的插入.删除.移动写在由这两个方法组成的函数块中.如果你不是在这两个函数组成的块中调用插入.删除.移动方法, ...

  10. Javascript:splice()方法实现对数组元素的插入、删除、替换及去重

    定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 语法: Array.prototype.splice(index,count[,el ...

随机推荐

  1. wordpress中安装插件需要ftp服务

    曾经天真的以为要装个ftp,然后发现这只是wordpress为了安全而留下的坑,只要修改wordpress配置即可 wordpress安装目录 ==> wp-config.php,文件添加以下代 ...

  2. python-web自动化-Js-日历操作

    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能:以12306网站为例,讲解如何解决日历控件为readonly属性的问题. 基本思路:先用js去掉readonly属 ...

  3. nginx跨域配置（windos走过的坑）

    nginx下载地址: http://nginx.org/en/download.html 红圈区域是稳定版 解压之后放在文件夹就可以了. 解压后: 注意:这里面有个nginx.exe文件,一般情况下双 ...

  4. 71.纯 CSS 创作一个跳 8 字型舞的 loader

    原文地址:https://segmentfault.com/a/1190000015534639#articleHeader0 感想:rotateX() 和rotateZ()一起使用好懵呀. HTML ...

  5. Unable to compile class for JSP 的可能原因

    浏览器访问web jsp文件,导致500-Unable to compile class for JSP 的原因. 原因一:查看网上的方法,说很可能的原因是tomcat版本比JDK的版本要低导致的.所 ...

  6. IDL实现矢量文件裁剪栅格数据

    利用ENVI_SUBSET_VIA_ROI_DOIT函数实现矢量文件裁剪栅格数据. 测试数据:栅格文件是Mercator投影,矢量文件是Geographic坐标系 infile='F:\Temp_Da ...

  7. python day04笔记总结

    2019.4.1 S21 day04笔记总结 昨日内容补充 1.解释器/编译器 1.解释型语言.编译型语言 2.解释型:写完代码后提交给解释器,解释器将代码一行行执行.(边接收边解释/实时解释) 常用 ...

  8. 今天遇到一个怪异的问题，maven生成项目war包中有一个Jar包不是我指定的版本，运行时会找不到符号，o(╥﹏╥)o

    我要求的jar包: 这是我parent项目中pom文件的依赖管理 这是我要生成war包那个工程最后依赖的jar包,这个时候它们的版本号还是一致的 最后项目生成的: 下图是Dmaven.test.ski ...

  9. python 推导式

    推导式又称解析式,是Python的一种独有特性.目的是可以从一个数据序列推导出另一个数据序列,适用于python 的list ,dict 和集合 list中的推导式: _list=[i for i i ...

  10. Django SCRF跨站点请求伪造

    使用Django发POSTt请求的时候经常会遇到Forbidden的错误,然后直接了当的方法就是去setting里面吧csrf中间件注释掉,其实csrf是django给我们提供的防护措施. CSRF就 ...