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代码实例
Jun 15 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
浅析vue数据绑定
Jan 17 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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 高手之路(三)
2006/10/09 PHP
php之XML转数组函数的详解
2013/06/07 PHP
php实例分享之二维数组排序
2014/05/15 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
python中open函数的基本用法示例
2019/09/07 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
python机器学习库xgboost的使用
2020/01/20 Python
上海方立数码笔试题
2013/10/18 面试题
篮球比赛策划方案
2014/06/05 职场文书
导游词欢迎词
2015/02/02 职场文书
奖学金个人总结
2015/03/04 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
学校德育工作总结2015
2015/05/11 职场文书
紫日观后感
2015/06/05 职场文书
付款证明格式范文
2015/06/19 职场文书
《绝招》教学反思
2016/02/20 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电