vue 实现模块上移下移 实现排序

<template>
  <div>
    <div class="box" v-for="(item,index) in arr" :key="index">
      {{item.cnName}}
      <div class="upDownWrapper">
        <span class="up" @click="upClick(index)">上移</span>
        <span class="down" @click="downClick(index)">下移</span>
      </div>
    </div>
  </div>
</template>

export default {
  data() {
    return {
      arr: [
        {
          cnName: "第一"
        },
        {
          cnName: "第二"
        },
        {
          cnName: "第三"
        },
        {
          cnName: "第四"
        }
      ]
    };
  }
};

  methods: {
    // 上下移动的核心。splice函数 返回的是被删除项  并且 会改变原数组
  　// arr.splice(index-1/index+1, 1, arr[index])[0] 这个得到是的 被删除的项 并且原数组 已经得到替换。 
    //所以需要将被删除项 设置为上一项的值
    // 上移
    upClick(index) {
        if (index === 0) {
          return this.$message.warning('已经是第一个了')
        }
        this.arr[index] = this.arr.splice(index - 1, 1, this.arr[index])[0]
    },
    // 下移
    downClick(index) {
        if (index === this.arr.length - 1) {
          return this.$message.warning('已经是最后一个了')
        }
        this.arr[index] = this.arr.splice(index + 1, 1, this.arr[index])[0]
    },

  }