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阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
angularJS提交表单(form)
Feb 09 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 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
Sony CFR 320 修复改造
2020/03/14 无线电
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
jQuery 表格工具集
2010/04/25 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
js实现百度搜索提示框
2017/02/05 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python max内置函数详细介绍
2016/11/17 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
农村产权制度改革实施方案
2014/03/21 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技