实现点击数字--上下移动操作

      <div v-for="(item,index) in list" :key="item.sum" class="my-list">
            <!-- 操作之后的要变化的数据 -->
            <div>{{item.sum}}</div>
            <!-- 要操作的数据 -->
            <div
                v-for="icon in iconList"
                :key="icon.value"
                @click="handleClick(icon.value,index)">
                {{icon.label}}
            </div>
        </div>
    </div>

    var app7 = new Vue({
        el: "#app",
        data: {
            list: [
                {
                    sum: 1,
                },
                {
                    sum: 2,
                },
                {
                    sum: 3,
                },
                {
                    sum: 4,
                },
            ],
            iconList: [
                {
                    value: "up",
                    label: "上移",
                },
                {
                    value: "down",
                    label: "下移",
                },
                {
                    value: "top",
                    label: "置顶",
                },
                {
                    value: "bottom",
                    label: "置底",
                },
                {
                    value: "del",
                    label: "删除",
                },
            ],
        },
        methods: {
            handleClick(value, index) {
                if (value === "up") {
                    if (index === 0) return;
                    // es5方式交换数据位置
                    // const lists = [...this.list];
                    // let result = lists[index]; //定义一个变量
                    // lists[index] = lists[index - 1]; //交换
                    // lists[index - 1] = result; //再交换
                    // this.list = lists; //重新赋值

                    // es6解构赋值方式
                    const list = [...this.list];
                    [list[index],list[index -1]] = [list[index -1],list[index]]
                    this.list = list
                }
                else if(value === 'down'){
                    if(this.iconList.length - 1 === index) return
                    const list = [...this.list];
                    [list[index],list[index +1]] = [list[index +1],list[index]] 
                    this.list = list
                } 
                else if(value === 'top'){
                    const list = [...this.list];
                    const item = list.splice(index,1)[0]
                    list.unshift(item)
                    this.list = list
                }
                else if(value === 'bottom') {
                    const list  = [...this.list];
                    const item = list.splice(index,1)[0]
                    list.push(item)
                    this.list = list

                }
                else if(value === 'del'){
                    this.list.splice(index,1)
                }
            },
        },
    });
  </script>