Vue.js实现一个待办事项列表的上移下移删除功能

如图，一个简单的待办事项列表长这样

这是一个基于vue.js的一个简单的待办事项列表小演示。首先要实现添加非空列表，点击目录切换完成状态这样的一个效果，推荐学习地址-点击打开链接

接下来是实现的一个上移，下移，删除的效果图：

删除效果：

讲一下思路：

上移-首先将鼠标所指目录的内容插入到上一条上面，然后删除鼠标所指的列表（也就是this.items[index])，运行代码便可实现上移的效果，或者将上下两条目录的内容进行调换也是可以的。

删除-这里和上下移一样，主要是用到了操作数组的接合这个方法，既可以添加也可以删除，不懂的去补一下

小二~上代码：

- App.vue -

divinput v-model=' new Item ' v-: key up。enter=' addNew '/div class=' box-center ' ul class=' box-list ' Li v-for=' item，item '中的索引v-bind : class=' {已完成的：项。已完成}“v-:鼠标悬停=“移动BTN(项目)”v-:鼠标移出=“离开BTN(项目)”span v-3:0上移/button button v-: click=' move DoWn(索引，项目)'下移/button button v-: click=' delete Btn(索引)'删除/button/span/Li/ul t；/div - Store.js -

const STORAGE _ KEY=' todos-vue js '导出默认值{ fetch(){ return JSON。解析(窗口。本地存储。getitem(STORAGE _ KEY)| '[]')}，save(items){ window。本地存储。setitem(STORAGE _ KEY，JSON。stringify(items))}-app。vue-span style=' font-size :14 px；'从""编写导入存储的脚本/store ' export default { data : function(){ return { title : '一个简单的待办事项列表'，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 : { toggle finished : function(items){ items is finished=！item.isfinished }，show : function($ event){ $ event。cancelubble=truethis.isBlock=falsethis。TopX=($ event。客户关系)；这个。LeftPx=($ event。client x)；}，停止：函数(事件){ this。ISblock=true}，移动BTN :功能(项){//控制台。日志(项目。标签)项目。isshow=true}，离开BTN :功能(项){项。isshow=false}，addNew:函数(){ //非空才可以添加if(this.newItem！=' '){这个。物品。推({标签:这个。新品，是完：假})}这个。新项目=' '；}，moveUp:function(索引，项目){ //在上一项插入该项this.items.splice(index-1，0，(this。项目[索引])；//删除后一项this.items.splice(索引1,1);item . isshow=false if(index==0){ alert('到顶啦!');} }，moveDown:function(索引，项目){ //在下一项插入该项this.items.splice(索引2，0，(this。项目[索引])；//删除前一项this.items.splice(索引，1);item . IssShow=false if(index==this。物品。长度-1){ alert('已经是最后一项啦!');} }，deletebtn :函数(索引){ this。物品。拼接(索引，1)；} }，}/script/span span style=' font-size : 18px；'/span套路就是在超文本标记语言中插入方法或者类、方法中对数据进行操作~

总结：

这是本小白入门vue.js学习的第一个演示，有一些jQuery的观念不能很好的转变，总是习惯性的操作数字正射影像图节点，殊不知某视频剪辑软件可以有更好的方式去实现

上面提到的是边肖推出的Vue.js实现了上移、下移、删除待办事项的功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！