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 相关文章推荐
javascript jQuery插件练习
Dec 24 Javascript
js window.onload 加载多个函数的方法
Nov 02 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
利用PM2部署node.js项目的方法教程
May 10 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
详细分析vue响应式原理
Jun 22 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 session有效期session.gc_maxlifetime
2011/04/20 PHP
深入PHP数据加密详解
2013/06/18 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
python脚本设置系统时间的两种方法
2016/02/21 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python global关键字的用法详解
2019/09/05 Python
PYTHON发送邮件YAGMAIL的简单实现解析
2019/10/28 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
python 实现的车牌识别项目
2021/01/25 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
专升本自我鉴定
2013/10/10 职场文书
高一历史教学反思
2014/01/13 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
主持稿开场白
2015/06/01 职场文书
格林童话读书笔记
2015/06/30 职场文书