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 ...
随机推荐
- Access Token 与 Refresh Token【转载哒科普啊】
Access Token 与 Refresh Token access token 是客户端访问资源服务器的令牌.拥有这个令牌代表着得到用户的授权.然而,这个授权应该是临时的,有一定有效期.这是因 ...
- 设置mysql远程连接
https://www.cnblogs.com/linjiqin/p/5270938.html
- one-hot编码理解
one-hot是比较常用的文本特征特征提取的方法. one-hot编码,又称“独热编码”.其实就是用N位状态寄存器编码N个状态,每个状态都有独立的寄存器位,且这些寄存器位中只有一位有效,说白了就是只能 ...
- ReactNative 学习笔记
1. react-native引入第三方库时报Command `run-android` unrecognized: 在使用第三方库tab-navigator时调用: npm install reac ...
- Shell 批量修改主机 用户密码
问题:132.121.114 和 132.121.118 网段共 48 台主机未添加基础监控,但是 wh 账户不能登录 需进行批量修改密码操作. 目前情况:op1对上述48台机器设备均能免密登录. 操 ...
- Xilinx Zynq ZC-702 开发（01）—— 概览
1.资料获取:https://github.com/Xilinx(开发所需资源,包括:交叉编译工具,linux kernel 源码,u-boot 源码, device-tree 源码, qemu, ...
- if __name__ == 'main': 的作用和原理
if __name__ == 'main': 功能 一个python的文件有两种使用的方法,第一是直接作为脚本执行,第二是import到其他的python脚本中被调用(模块重用)执行. if __na ...
- mount命令和自动挂载实例
前言 介绍mount命令和一个实例. mount命令 作用 作用:挂载linux系统外的文件 命令格式 mount [-hV] mount -a [-fFnrsvw] [-t vfstype] mou ...
- JAVA_04
* a:局部代码块 * 在方法中出现:限定变量生命周期,及早释放,提高内存利用率 * b:构造代码块 (初始化块) * 在类中方法外出现:多个构造方法方法中相同的代码存放到一起,每次调用构造都执行,并 ...
- 注意UTF-8-BOM 这个编码格式
有时候文本文件处理出现异常,找不到其他原因的时候,注意查看下文件的编码: Notepad:编码菜单 如果发现是UTF-8-BOM,需要改成UTF-8