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 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
JS hashMap实例详解
May 26 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
ES6字符串的扩展实例
Dec 21 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入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
js日期联动示例
2014/05/02 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
numpy中的高维数组转置实例
2018/04/17 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
C语言中break与continue的区别
2012/07/12 面试题
一道Delphi面试题
2016/10/28 面试题
模具专业毕业生自荐书范文
2014/02/19 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
工会积极分子个人总结
2015/03/03 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
php字符串倒叙
2021/04/01 PHP
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
Python Django模型详解
2021/10/05 Python
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python