Petua untuk menggunakan v-for untuk melaksanakan pengisihan dinamik dalam Vue

Vue ialah rangka kerja JavaScript moden yang membantu kami membina halaman web dinamik dan aplikasi kompleks dengan mudah. Dalam Vue, anda boleh membuat struktur gelung dengan mudah menggunakan v-for untuk menghasilkan data secara berulang. Dalam beberapa senario tertentu, kita juga boleh menggunakan v-for untuk melaksanakan pengisihan dinamik. Artikel ini akan memperkenalkan cara menggunakan v-for untuk melaksanakan teknik pengisihan dinamik dalam Vue, serta beberapa senario dan contoh aplikasi.

1. Gunakan v-for untuk pengisihan dinamik yang mudah

Cara paling mudah untuk menggunakan v-for untuk melaksanakan pengisihan dinamik ialah mengisih data melalui sifat yang dikira dan mengikat data yang diisih ke tengah arahan v-for. Kaedah ini mudah dan berkesan, serta sesuai untuk situasi di mana jumlah data adalah kecil dan keadaan pengisihan tidak terlalu kompleks.

Sebagai contoh, kami mempunyai senarai yang mengandungi nama dan maklumat umur beberapa orang. Sekarang kita perlu mengisih data ini mengikut maklumat umur dan memaparkannya di halaman web. Kemudian, kita boleh terlebih dahulu mentakrifkan tatasusunan orang dalam contoh Vue dan menggunakan arahan v-untuk untuk menjadikannya templat:

<template>
  <ul>
    <li v-for="(person, index) in persons" :key="index">{{ person.name }} {{ person.age }}</li>
  </ul>
</template>

Tentukan harta yang dikira sortedPersons dalam harta terkira contoh Vue, susun tatasusunan orang mengikut umur dan kembalikannya , kodnya adalah seperti berikut:

computed: {
  sortedPersons() {
    return this.persons.sort((a, b) => a.age - b.age);
  }
}

Ikat tatasusunan sortedPersons ke arahan v-for dalam templat, kodnya adalah seperti berikut:

<template>
  <ul>
    <li v-for="(person, index) in sortedPersons" :key="index">{{ person.name }} {{ person.age }}</li>
  </ul>
</template>

Dengan cara ini, kami telah mencapai tujuan untuk mengisih secara dinamik susunan orang mengikut umur.

2. Gunakan sifat yang dikira untuk pengisihan lanjutan

Jika anda perlu melakukan pengisihan yang lebih kompleks pada senarai, seperti pengisihan berdasarkan dua atau lebih syarat pada masa yang sama, anda boleh menentukan kaedah pengisihan tersuai dalam sifat yang dikira. Laksanakan pengisihan lanjutan. Kaedah ini menerima dua parameter iaitu tatasusunan yang hendak diisih dan peraturan pengisihan. Dalam peraturan pengisihan, anda boleh menetapkan susunan pengisihan melalui kaedah penghakiman.

Sebagai contoh, kami mempunyai senarai pekerja dan perlu menyusun pekerja berdasarkan umur dan tahun bekerja. Peraturan pengisihan ialah, susun mengikut tertib menurun mengikut umur, dan jika umur adalah sama, susun mengikut tertib menaik mengikut tahun bekerja. Kodnya adalah seperti berikut:

<template>
  <ul>
    <li v-for="(employee, index) in sortedEmployees" :key="index">{{ employee.name }} {{ employee.age }} {{ employee.experience }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      employees: [
        { name: '张三', age: 25, experience: 2 },
        { name: '李四', age: 27, experience: 3 },
        { name: '王五', age: 25, experience: 1 },
        { name: '赵六', age: 30, experience: 5 },
      ],
    }
  },
  computed: {
    sortedEmployees() {
      return this.employees.sort((a, b) => {
        if (a.age < b.age) return 1;
        else if (a.age > b.age) return -1;
        else {
          if (a.experience > b.experience) return 1;
          else if (a.experience < b.experience) return -1;
          else return 0;
        }
      });
    },
  },
}
</script>

Pada masa ini, kita boleh mendapatkan senarai pekerja yang disusun mengikut umur dalam susunan menurun, dan jika umur adalah sama, maka mengikut tahun bekerja dalam susunan menaik.

3. Gunakan v-for untuk melaksanakan pengisihan seret dan lepas

Selain menggunakan sifat pengiraan yang dikira untuk mengisih data secara dinamik, kami juga boleh menggunakan v-for untuk melaksanakan pengisihan seret dan lepas. Dalam Vue, anda boleh menggunakan pemalam Vuedraggable untuk melaksanakan fungsi isihan drag-and-drop v-for. Pemalam berfungsi dengan mana-mana jenis data termasuk tatasusunan, objek, dsb.

Sebagai contoh, kami mempunyai senarai dan perlu melaksanakan pengisihan seret dan lepas pada halaman web. Kemudian, kita boleh mula-mula memasang pemalam Vuedraggable, gunakan arahan npm:

npm install vuedraggable --save

Perkenalkan pemalam Vuedraggable ke dalam contoh Vue, dan ikat data yang perlu diisih kepada atribut mengikat v-bindnya. Pemalam Vuedraggable secara automatik menukar data ini kepada elemen seret dan lepas. Kodnya adalah seperti berikut:

<template>
  <vuedraggable v-model="items">
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
  </vuedraggable>
</template>

<script>
import Vuedraggable from 'vuedraggable';

export default {
  components: {
    Vuedraggable,
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        { id: 4, name: 'Peach' },
        { id: 5, name: 'Grape' },
      ],
    };
  },
};
</script>

Dengan cara ini, kita boleh melaksanakan fungsi pengisihan seret dan lepas data dengan mudah.

Ringkasan

Dalam Vue, menggunakan v-for boleh melaksanakan fungsi dengan mudah seperti pengisihan dinamik dan pengisihan seret dan lepas. Antaranya, anda boleh melakukan pengisihan mudah atau lanjutan data melalui sifat yang dikira, atau anda boleh menggunakan pemalam Vuedraggable untuk mencapai kesan seret dan lepas data. Pembangun harus memilih kaedah yang sesuai dengan mereka berdasarkan keperluan dan senario sebenar.

Atas ialah kandungan terperinci Petua untuk menggunakan v-for untuk melaksanakan pengisihan dinamik dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!