todolist---插入和删除----vue
<!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的更多相关文章
- 我的MYSQL学习心得（八） 插入 更新 删除
我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...
- Entity Framework 6 Recipes 2nd Edition（10-9）译 -> 在多对多关系中为插入和删除使用存储过程
10-9. 在多对多关系中为插入和删除使用存储过程 问题 想要在一个无载荷的多对多关系中使用存储过程(存储过程只影响关系的连接表) 解决方案 假设有一个多对多关系的作者( Author)表和书籍( B ...
- 与TableView插入、删除、移动、多选，刷新控件
一.插入.删除.移动.多选 方法一: Cell的插入.删除.移动都有一个通用的方法,就是更新tableView的数据源,再reloadData,这样做实现上是简单一点,但是reloadData是刷新整 ...
- Java 集合与队列的插入、删除在并发下的性能比较
这两天在写一个java多线程的爬虫,以广度优先爬取网页,设置两个缓存: 一个保存已经访问过的URL:vistedUrls 一个保存没有访问过的URL:unVistedUrls 需要爬取的数据量不大,对 ...
- 数据结构Java实现03----单向链表的插入和删除
文本主要内容: 链表结构 单链表代码实现 单链表的效率分析 一.链表结构: (物理存储结构上不连续,逻辑上连续:大小不固定) 概念: 链式存储结构是基于指针实现的.我们把一个数据 ...
- 怎么用CorelDRAW插入、删除与重命名页面
在绘图之前,页面的各种设置也是一项重要的工作,本文主要讲解如何在CorelDRAW中插入.删除.重命名页面等操作.在CorelDRAW的绘图工作中,常常需要在同一文档中添加多个空白页面,删除一些无用的 ...
- 二叉查找树的查找、插入和删除 - Java实现
http://www.cnblogs.com/yangecnu/p/Introduce-Binary-Search-Tree.html 作者: yangecnu(yangecnu's Blog on ...
- [改善Java代码]频繁插入和删除时使用LinkedList
一.分析 前面有文章分析了列表的表里方式,也就是“读”的操作.本文将介绍表的“写”操作:即插入.删除.修改动作. 二.场景 1.插入元素 列表中我们使用最多的是ArrayList,下面看看他的插入(a ...
- UITableView的编辑（插入、删除、移动）
先说两个方法beginUpdates和endUpdates,几点注意事项: 一般我们把行.块的插入.删除.移动写在由这两个方法组成的函数块中.如果你不是在这两个函数组成的块中调用插入.删除.移动方法, ...
- Javascript:splice()方法实现对数组元素的插入、删除、替换及去重
定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 语法: Array.prototype.splice(index,count[,el ...
随机推荐
- BZOJ 3687: 简单题 bitset
3687: 简单题 Time Limit: 10 Sec Memory Limit: 512 MB[Submit][Status][Discuss] Description 小呆开始研究集合论了,他 ...
- win10、Ubuntu14.04双系统正确卸载Ubuntu的方法
参考博客:http://www.cnblogs.com/xia-Autumn/p/6294055.html 问题描述:由于python问题Ubuntu系统崩了,登录之后无法进入桌面.重装桌面时报错,无 ...
- 接口测试 - ti
脚本 主程序 #!/bin/bash . /etc/ti/ti.conf . /etc/ti/ti.fun #-basic.json | curl -H "Content-Type:appl ...
- Hive：map字段存储和取用 ( str_to_map函数 )
str_to_map(字符串参数, 分隔符1, 分隔符2) 使用两个分隔符将文本拆分为键值对. 分隔符1将文本分成K-V对,分隔符2分割每个K-V对.对于分隔符1默认分隔符是 ',',对于分隔符2默认 ...
- 关于单元测试时加载spring-context.xml文件的问题
在进行web开发的时候,通常我们都会使用Spring框架,使用spring容器管理java bean. 而spring的配置文件有时候放在classpath下面,有时候放在WEB-INF下面. 一般在 ...
- Django之Form验证
view.py 配置 from django import forms from django.forms import fields # Create your views here. class ...
- React列表
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((numbers) => <li>{numbers}&l ...
- 发布python包
写python程序时常常要导入各种包,使用其中的模块或功能.我们如果有可以复用的功能或模块也可以发布成包,并安装在自己或他人电脑上,以供自己或别人使用.python发布包的步骤如下: 一.首先为模块创 ...
- idea Tomcat部署时没有update classes and resources
idea 没有update classes and resources 发现为了方便调试页面,想用idea的update classes and resources找不到了,发现需要把 ...
- Ontology理论研究和应用建模
转自:https://www.cnblogs.com/yes-V-can/p/8151275.html 目录 1 关于Ontology 1.1 Ontology的定义 1.2 Ontology的建模元 ...