使用vue实现可以点击排序的列表

原创 WALL-E 教程 vue 100阅读 4 天前 举报

功能需求

显示如图所示列表,点击选项时,选项前面的方框中出现点击的顺序,当再次点击同一个选项时,取消该选项的顺序,同时该选项后面的顺序全部更新。

数据准备

我们预先准备好一份用来渲染列表的数据(由key和value作为属性的对象构成的数组)

列表渲染

第一步不管三七二十一,先将列表展示出来。使用vue的v-for指令轻松实现

列表渲染完成后开始思考点击事件。

事件添加

我们先定义一个空数组order,当点击元素时,将元素key值push进数组order中,key在数组order中的键值就是他们的顺序值。
当再次点击同一个元素时,查找数组order中存在的对应key值,并使用数组的splice方法删除。删除后,所删除元素后面的key在数组order中的键值自动更新,保证了删除后顺序连贯性。

顺序显示

点击后产生的元素顺序记录在数组order中,还没有显示在元素的方框中,我们再定一个函数用来查找元素在数组中的位置即可

结尾

所以最终我们实现顺序显示,用到了两点
第一点,利用数组天然的顺序性
第二点,利用vue的响应式渲染
demo源码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复