vue中实现数组元素的上移和下移

最新推荐文章于 2025-03-16 12:50:18 发布

@Demi

最新推荐文章于 2025-03-16 12:50:18 发布

阅读量7.9k

点赞数 17

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签：上移下移

本文链接：https://blog.csdn.net/qq_38128179/article/details/114276111

VUE 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现列表项上移和下移功能的方法，通过修改数组内部元素的位置来达到目的，并提供了禁用无效操作的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候我们需要实现列表元素上移和下移交换位置，我们把数组数据渲染到视图中，可以通过数组元素交换位置来实现上移和下移功能

一、要移动的数组列表

  data() {
    return {
      questionList: [
        { question: "第一个问题？" },
        { question: "第二个问题？" },
        { question: "第三个问题？" },
        { question: "第四个问题？" },
        { question: "第五个问题？" },
      ],
    };
  },

二、上移、下移函数

  methods: {
    // 上移
    clickUp(index) {
      let arr = this.questionList;
      arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]));
    },
    // 下移
    clickDown(index) {
      let arr = this.questionList;
      arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]));
    },
  },

三、效果

四、注意

当元素处于第一个位置时，禁止让它继续上移，当元素处于最后一个位置时，禁止让它继续下移。我们给按钮增加disabled属性，index为for循环渲染视图中的index

    <div v-for="(item, index) in questionList" :key="index">
      <p>{{item.question}}</p>
      <div class="btns">
        <!-- 上移 -->
        <Button :disabled="index == 0" @click="clickUp(index)"></Button>
        <!-- 下移 -->
        <Button :disabled="index == questionList.length - 1" @click="clickDown(index)"></Button>
      </div>
    </div>