vueで配列要素の上下の動きを実現します

リスト要素の上下シフト位置を実現する必要がある場合があります。配列データをビューにレンダリングし、配列要素の位置を入れ替えることで上下シフト機能を実現できます。

1つは、移動する配列のリストです。

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

2、上に移動、下に移動機能

  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属性を追加します。インデックスは、forループレンダリングビューのインデックスです。

    <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>

記事は毎週継続的に更新されます。WeChatで「フロントエンドコレクション 」を検索し て初めて読むと、[ビデオ] [ブック]に返信して、200Gのビデオ資料と30のPDFブック資料を受け取ることができます。

​