Vue.js实现一个todo-list的上移下移删除功能


Posted in Javascript onJune 26, 2017

如图,A simple todo-list长这样

Vue.js实现一个todo-list的上移下移删除功能

这是一个基于vue.js的一个简单的todo-list小demo。首先要实现添加非空list,点击list切换finished状态这样的一个效果,推荐学习地址---->点击打开链接

接下来是实现的一个上移,下移,删除的效果图:

Vue.js实现一个todo-list的上移下移删除功能

删除效果:

Vue.js实现一个todo-list的上移下移删除功能

讲一下思路:

上移-----首先将鼠标所指list的内容插入到上一条上面,然后删除鼠标所指的list(也就是this.items[index]),运行代码便可实现上移的效果,或者将上下两条list的内容进行调换也是可以的。

删除-----这里和上下移一样,主要是用到了操作数组的splice这个方法,既可以添加也可以删除,不懂的去补一下

小二~上代码:

----App.vue---- 

<div><input v-model="newItem" v-on:keyup.enter="addNew"></div> 
<div class="box-center"> 
 <ul class="box-list"> 
  <li v-for="item ,index in items" v-bind:class="{finished:item.isfinished}"  

  v-on:mouseover="moveBtn(item)" v-on:mouseout="leaveBtn(item)"> 
  <span v-on:click="toggleFinished(item)" v-bind:class="{bgYellow:item.isBgyellow}">{{item.label}}</span> 
  <span class="list-btn" v-show="item.isShow"> 
   <button v-on:click="moveUp(index,item)">上移</button> 
   <button v-on:click="moveDown(index,item)">下移</button> 
   <button v-on:click="deleteBtn(index)">删除</button> 
  </span> 
 </li> 
</ul>  
t;/div>

----Store.js---- 

const STORAGE_KEY = 'todos-vuejs' 
export default { 
 fetch () { 
  return JSON.parse(window.localStorage.getItem( 
   STORAGE_KEY) || '[]') 
 }, 
 save (items) { 
  window.localStorage.setItem(STORAGE_KEY,JSON.stringify( 
   items)) 
 } 
} 
----App.vue---- 
<span style="font-size:14px;"><script> 
import Store from './store' 
export default { 
 data: function() { 
  return { 
   title: 'A simple todo-list', 
   items: Store.fetch(), 
   newItem: '', 
   msg:'点击按钮',  
   isShow: false, 
   isBlock: true, 
   isBgyellow: false, 
   leftPx:0, 
   topPx:0 
  } 
 }, 
 watch: { 
  items: { 
   handler: function(items) { 
    Store.save(items) 
   }, 
   deep: true 
  } 
 }, 
 methods: { 
  toggleFinished: function(item) { 
   item.isfinished = !item.isfinished 
  }, 
  show:function ($event) { 
   $event.cancelBubble=true; 
   this.isBlock = false; 
   this.topPx = ($event.clientY); 
   this.leftPx = ($event.clientX); 
  }, 
  stop:function(event){ 
    this.isBlock = true; 
  }, 
  moveBtn:function(item) { 
   // console.log(item.label) 
   item.isShow = true; 
  }, 
  leaveBtn:function(item) { 
   item.isShow = false; 
  }, 
  addNew: function() { 
   //非空才可以添加 
   if(this.newItem!=''){ 
    this.items.push({ 
     label: this.newItem, 
     isfinished: false 
    })     
   } 
   this.newItem = ''; 
  }, 
  moveUp:function(index,item) { 
   //在上一项插入该项 
   this.items.splice(index-1,0,(this.items[index])); 
   //删除后一项 
   this.items.splice(index+1,1); 
   item.isShow = false; 
   if(index == 0) { 
    alert("到顶啦!"); 
   } 
  }, 
  moveDown:function(index,item) { 
   //在下一项插入该项 
   this.items.splice(index+2,0,(this.items[index])); 
   // 删除前一项 
   this.items.splice(index,1); 
   item.isShow = false; 
   if(index == this.items.length-1) { 
    alert("已经是最后一项啦!"); 
   } 
  }, 
  deleteBtn:function(index) { 
   this.items.splice(index,1); 
  } 
 }, 
} 
</script></span><span style="font-size: 18px;"> 
</span>

套路就是在html中插入方法或者class,methods中对数据进行操作~

总结:

这是本小白入门vue.js学习的第一个demo,有一些jQuery的观念不能很好的转变,总是习惯性的操作dom节点,殊不知vue可以有更好的方式去实现

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

Javascript 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
jQuery的学习步骤
Feb 23 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 #Javascript
基于jQuery封装的分页组件
Jun 26 #jQuery
深入理解Angular中的依赖注入
Jun 26 #Javascript
详解AngularJS2 Http服务
Jun 26 #Javascript
详解用node.js实现简单的反向代理
Jun 26 #Javascript
JS作用域链详解
Jun 26 #Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 #jQuery
You might like
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
dedecms中常见问题修改方法总结
2007/03/21 PHP
PHP单例模式详细介绍
2015/07/01 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
Python迭代用法实例教程
2014/09/08 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
python3.4爬虫demo
2019/01/22 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
python中get和post有什么区别
2020/06/19 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
Python txt文件如何转换成字典
2020/11/03 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
大学生求职简历的自我评价范文
2013/10/12 职场文书
商务英语专业应届毕业生求职信
2013/10/28 职场文书
大学生军训自我评价分享
2013/11/09 职场文书
工作时间上网检讨书
2014/02/03 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2014年教研室工作总结
2014/12/06 职场文书
原告代理词范文
2015/05/25 职场文书
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL