Conseils pour utiliser v-for pour implémenter le tri dynamique dans Vue

Vue est un framework JavaScript moderne qui nous aide à créer facilement des pages Web dynamiques et des applications complexes. Dans Vue, vous pouvez facilement créer des structures de boucles en utilisant v-for pour restituer les données de manière itérative. Dans certains scénarios spécifiques, nous pouvons également utiliser v-for pour implémenter le tri dynamique. Cet article présentera comment utiliser v-for pour implémenter des techniques de tri dynamique dans Vue, ainsi que quelques scénarios et exemples d'application.

1. Utilisez v-for pour un tri dynamique simple

Le moyen le plus simple d'utiliser v-for pour implémenter le tri dynamique est de trier les données via des propriétés calculées et de lier les données triées au milieu de l'instruction v-for. Cette méthode est simple et efficace, et convient aux situations où la quantité de données est faible et les conditions de tri ne sont pas trop complexes.

Par exemple, nous avons une liste qui contient les noms et les informations sur l'âge de plusieurs personnes. Nous devons maintenant trier ces données en fonction des informations sur l’âge et les afficher sur la page Web. Ensuite, nous pouvons d'abord définir un tableau de personnes dans l'instance Vue et utiliser l'instruction v-for pour le restituer dans le modèle :

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

Définissez une propriété calculée sortedPersons dans la propriété calculée de l'instance Vue, triez le tableau de personnes en fonction de age et renvoyez-le, le code est le suivant :

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

Liez le tableau sortedPersons à la directive v-for dans le modèle, le code est le suivant :

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

De cette façon, nous avons atteint l'objectif de trier dynamiquement les les personnes sont classées selon leur âge.

2. Utiliser les propriétés calculées pour un tri avancé

Si vous devez effectuer un tri plus complexe sur la liste, comme un tri basé sur deux ou plusieurs conditions en même temps, vous pouvez définir une méthode de tri personnalisée dans les propriétés calculées. Implémentez un tri avancé. Cette méthode reçoit deux paramètres, à savoir le tableau à trier et la règle de tri. Dans les règles de tri, vous pouvez définir l'ordre de tri via des méthodes de jugement.

Par exemple, nous avons une liste d'employés et devons trier les employés en fonction de leur âge et de leurs années de travail. La règle de tri est la suivante : trier par ordre décroissant par âge, et si les âges sont égaux, trier par ordre croissant par années de travail. Le code est le suivant :

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

A ce moment, on peut obtenir une liste des salariés triés par âge par ordre décroissant, et si les âges sont égaux, alors par années de travail par ordre croissant.

3. Utilisez v-for pour implémenter le tri par glisser-déposer

En plus d'utiliser des propriétés calculées pour trier dynamiquement les données, nous pouvons également utiliser v-for pour implémenter le tri par glisser-déposer des données. Dans Vue, vous pouvez utiliser le plug-in Vuedraggable pour implémenter la fonction de tri par glisser-déposer de v-for. Le plugin fonctionne avec n'importe quel type de données, y compris les tableaux, les objets, etc.

Par exemple, nous avons une liste et devons mettre en œuvre un tri par glisser-déposer sur la page Web. Ensuite, nous pouvons d'abord installer le plug-in Vuedraggable, utiliser la commande npm :

npm install vuedraggable --save

Introduire le plug-in Vuedraggable dans l'instance Vue et lier les données qui doivent être triées à son attribut de liaison v-bind. Le plugin Vuedraggable convertit automatiquement ces données en éléments glisser-déposer. Le code est le suivant :

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

De cette façon, nous pouvons facilement implémenter la fonction de tri par glisser-déposer des données.

Résumé

Dans Vue, l'utilisation de v-for peut facilement implémenter des fonctions telles que le tri dynamique et le tri par glisser-déposer. Parmi eux, vous pouvez effectuer un tri simple ou avancé des données via des propriétés calculées, ou vous pouvez utiliser le plug-in Vuedraggable pour obtenir l'effet glisser-déposer des données. Les développeurs doivent choisir une méthode qui leur convient en fonction des besoins et des scénarios réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!