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(二)事件机制(2)
Dec 06 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
js中的this关键字详解
Sep 25 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Python中的列表知识点汇总
2015/04/14 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Python之reload流程实例代码解析
2018/01/29 Python
python 判断网络连通的实现方法
2018/04/22 Python
Python实现的knn算法示例
2018/06/14 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
python selenium循环登陆网站的实现
2019/11/04 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
医药代表个人的求职信分享
2013/12/08 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
婚前协议书
2014/04/15 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
怎么写工作检讨书
2014/11/16 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python