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 ...
随机推荐
- Linux高级指令
一.hostname指令 作用:操作服务器的主机名(读取,设置) #hostname 作用:表示输出完整的主机名 #hostname -f 作用:表示输出当前主机名中的FQDN(权限定域名 ...
- Dao层抽取BaseDao公共方法
设计IBseDao接口,定义公共的CRUD方法. // IBaseDao 接口,定义公共的CRUD方法 public interface IBaseDao<T> { public void ...
- TinkPHP框架学习-03模型类
1-----数据访问 2-----数据查询 3-----数据添加 4-----数据修改 5-----数据删除 创建一张nation表并写入三条测试数据 create table nation( `co ...
- Mac系统如何显示隐藏文件？
显示全部文件 defaults write com.apple.finder AppleShowAllFiles -bool true osascript -e 'tell application & ...
- JavaScript字符串操作方法大全，包含ES6方法
一.charAt() 返回在指定位置的字符. var str="abc" console.log(str.charAt(0))//a 二.charCodeAt() 返回在指定的位置 ...
- c++多态及实现原理
https://www.cnblogs.com/cxq0017/p/6074247.html 通过虚函数实现,普通函数在编译过程中即确定了函数的地址,虚函数的函数地址是在程序运行的时候确定的,有虚函数 ...
- laravel passport加密jwt格式的access_token中的sub(user_id)字段
在很多需求我们不希望别人知道用户在我们表中的 user_id :但是又想用数据库的自增 id 功能:一般时候在取出用户后加密 user_id 加密即可:但是总有那么几个不经意间就可能把我们的 user ...
- 讨论下茴香逗的茴字有几种写法，javascript字符串数组查找“indexOf"的替代方式。
- 一条分页的SQL语句
1.概述 在网页中如果显示的数据太多就会占据过多的页面,而且显示速度也会很慢.为了控制每次在页面上显示数据的数量,就可以利用分页来显示数据. 2.技术要点 在SQL Server中要实现SQL分页,需 ...
- HATEOAS
HATEOAS(Hypermedia as the engine of application state)是 REST 架构风格中最复杂的约束,也是构建成熟 REST 服务的核心.它的重要性在于打破 ...