Perceba o movimento para cima e para baixo dos elementos da matriz em vue

Às vezes, precisamos perceber a posição de deslocamento dos elementos da lista para cima e para baixo. Renderizamos os dados do array na visualização, e as funções de deslocamento para cima e para baixo podem ser realizadas trocando as posições dos elementos do array.

Um, a lista de matrizes a serem movidas

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

Dois, mova para cima, mova a função para baixo

  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]));
    },
  },

Três, o efeito

Quatro, atenção

Quando o elemento está na primeira posição, é proibido continuar a se mover para cima, e quando o elemento está na última posição, é proibido continuar a se mover para baixo. Adicionamos o atributo disabled ao botão, e index é o índice na visualização de renderização for loop

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

Os artigos são atualizados continuamente todas as semanas. Você pode pesquisar por " Coleção de front-end  " no WeChat para  lê-la pela primeira vez, responda a [ Vídeo ] [ Livro ] para receber materiais de vídeo 200G e 30 materiais de livros em PDF

​