功能需求
显示如图所示列表, 点击选项时, 选项前面的方框中出现点击的顺序, 当再次点击同一个选项时, 取消该选项的顺序, 同时该选项后面的顺序全部更新.
数据准备
我们预先准备好一份用来渲染列表的数据 (由 key 和 value 作为属性的对象构成的数组)
列表渲染
第一步不管三七二十一, 先将列表展示出来. 使用 vue 的 v-for 指令轻松实现
列表渲染完成后开始思考点击事件.
事件添加
我们先定义一个空数组 order, 当点击元素时, 将元素 key 值 push 进数组 order 中, key 在数组 order 中的键值就是他们的顺序值.
当再次点击同一个元素时, 查找数组 order 中存在的对应 key 值, 并使用数组的 splice 方法删除. 删除后, 所删除元素后面的 key 在数组 order 中的键值自动更新, 保证了删除后顺序连贯性.
顺序显示
点击后产生的元素顺序记录在数组 order 中, 还没有显示在元素的方框中, 我们再定一个函数用来查找元素在数组中的位置即可
结尾
所以最终我们实现顺序显示, 用到了两点
第一点, 利用数组天然的顺序性
第二点, 利用 vue 的响应式渲染
demo 源码 https://coding.net/u/young7657/p/vue-sort/git?public=true
来源: http://www.qdfuns.com/article/38384/1a5ed4e4d420e9fc8947e2da47e380cb.html