Vue实现todolist删除功能


Posted in Javascript onJune 26, 2018

代码如下所示:

<div id="app">
 <input v-model="inputValue">
 <button @click="handleSumbit">提交</button>
 <todo-item v-for="(item,index) of list":key="index":content="item":index="index"
  @delete="handleDelete"></todo-item>
</div>

子组件向父组件传递数据使用 this.$emit('delete',this.index)该方法

<script >
 Vue.component('todo-item',{
  props:["content",'index'],
  template:"<li @click='handleSubmit'>{{content}}{{index}}</li>",
  methods:{
   handleSubmit:function () {
    this.$emit('delete',this.index)
   }
  }
 })
 new Vue({
  el:'#app',
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSumbit:function () {
    this.list.push(this.inputValue);
    this.inputValue="";
   },
   handleDelete:function (index) {
    this.list.splice(index,1)
   }
  }
 })
</script>

总结

以上所述是小编给大家介绍的Vue实现todolist删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 #Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 #Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
在vue中使用公共过滤器filter的方法
Jun 26 #Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 #Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 #Javascript
Vue动态控制input的disabled属性的方法
Jun 26 #Javascript
You might like
PHP empty函数报错解决办法
2014/03/06 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
tensorflow如何批量读取图片
2019/08/29 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python内置函数property()如何使用
2020/09/01 Python
python字典按照value排序方法
2020/12/28 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
建筑设计师岗位职责
2013/11/18 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
小学假期安全广播稿
2014/09/28 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书