vue ele 更换li的位置

可以使用Vue的v-for指令以及数组的splice方法来更换li的位置。

示例代码如下：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="item.id">
      {{ item.name }}
      <button @click="moveUp(index)" :disabled="index === 0">上移</button>
      <button @click="moveDown(index)" :disabled="index === list.length - 1">下移</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'item1' },
        { id: 2, name: 'item2' },
        { id: 3, name: 'item3' },
        { id: 4, name: 'item4' }
      ]
    }
  },
  methods: {
    moveUp(index) {
      this.list.splice(index - 1, 0, this.list.splice(index, 1)[0]);
    },
    moveDown(index) {
      this.list.splice(index + 1, 0, this.list.splice(index, 1)[0]);
    }
  }
}
</script>

在上面的示例中，使用v-for指令遍历list数组，每个li元素都绑定了一个上移和下移的按钮，点击按钮时调用moveUp和moveDown方法来更改数组的顺序，从而实现li元素的位置交换。其中，splice方法的第一个参数表示要插入或删除的位置，第二个参数表示删除的个数，第三个参数表示要插入的元素。