Vue.js实现的上移下移的排序功能

概述

项目开发过程中，碰到需要上下移动的功能。开始觉得挺复杂，后面仔细一想挺简单，代码贴上来，实现方法应该有很多种。

Demo代码

<template>
    <div v-for="(item, index) in data" :key="index" class="sub-list">
        <div>{{ item.name }}</div>
        <div class="op-box">
          <span @click="onUpItem(item, index)">上移</span>
          <span @click="onDownItem(item, index)">下移</span>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      data: [
          {name: '1'},
          {name: '2'},
          {name: '3'},
          {name: '4'}
      ]
    }
  },
  methods: {
    // 上移
    onUpItem (item, index) {
      this.data.splice(index - 1, 0, item)
      this.data.splice(index + 1, 1)
    },
    // 下移
    onDownItem (item, index) {
      this.data.splice(index + 2, 0, item)
      this.data.splice(index, 1)
    }
  }
}
</script>