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 相关文章推荐
关于jquery css的使用介绍
Apr 18 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
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
PHP如何实现订单的延时处理详解
2017/12/30 PHP
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
详解python 内存优化
2020/08/17 Python
审核会计岗位职责
2013/11/08 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
服务员岗位责任制
2014/02/11 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
婚前财产协议书范本
2014/10/19 职场文书
小学安全工作总结2015
2015/05/18 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
mysql幻读详解实例以及解决办法
2022/06/16 MySQL