Vue est un framework JavaScript très populaire qui nous permet de créer facilement des applications Web. Parmi elles, une fonctionnalité clé de Vue réside dans ses capacités de gestion de listes dans la page, nous permettant de restituer et de gérer facilement de grandes quantités de données. Cependant, en fonctionnement réel, vous pouvez rencontrer des situations dans lesquelles vous devez supprimer activement la liste. Cet article expliquera comment implémenter la suppression active des listes dans Vue.
1. Rendu de liste Vue
Le rendu de liste Vue est une fonctionnalité puissante de Vue, qui nous permet de restituer des données dans une liste de pages sans écrire manuellement le code du modèle. Voyons ensuite comment utiliser le rendu de liste Vue :
Le rendu de liste Vue peut être effectué avec une simple directive v-for, similaire à la structure de boucle for couramment utilisée en JavaScript. Dans Vue, toutes les données d'un tableau peuvent être restituées sur la page via l'instruction v-for.
Par exemple, supposons que nous ayons une liste de données comme suit :
data: { list: ['苹果', '香蕉', '橙子'] }
Nous pouvons utiliser la directive v-for de Vue pour la restituer sur la page comme suit :
<ul> <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul>
Ici, la directive v-for parcourra les données de la liste et put Chaque élément de la liste est rendu sous la forme d'un élément
2. Vue supprime activement la liste
Pour la situation où la liste Vue doit être supprimée, nous pouvons y parvenir en suivant les étapes suivantes :
Nous devons définir une méthode dans Vue objet, ce qui supprimera la liste des projets désignés. Par exemple, le code suivant implémente une méthode pour supprimer un élément spécifié dans une liste :
methods: { removeItem: function (index) { this.list.splice(index, 1); } }
Dans la méthode delete, nous utilisons list.splice(index, 1) pour supprimer l'élément à l'index spécifié de la liste. Le premier paramètre de la méthode splice est l'index de l'élément à supprimer et le deuxième paramètre est le nombre d'éléments à supprimer.
Nous pouvons utiliser la directive v-on dans le modèle pour appeler la méthode delete. Par exemple, le code suivant appellera la méthode RemoveItem lorsque l'utilisateur clique sur un élément de la liste :
<ul> <li v-for="(item, index) in list" :key="index" v-on:click="removeItem(index)">{{item}}</li> </ul>
Dans ce code, nous avons ajouté une directive v-on pour appeler la méthode RemoveItem. Lorsque l'utilisateur clique sur un élément de liste, la directive v-on appelle la méthode RemoveItem, en passant l'index de l'élément de liste en tant que paramètre à la méthode.
3. Animation de liste Vue
En plus de supprimer activement des listes dans Vue, nous pouvons également améliorer l'expérience utilisateur de la liste en ajoutant des animations de transition. Vue utilise la transition et l'animation pour définir des animations de transition.
Nous pouvons définir des effets de transition CSS dans la feuille de style CSS, comme indiqué ci-dessous :
.list-enter-active, .list-leave-active { transition: opacity .5s; } .list-enter, .list-leave-to{ opacity: 0; }
Ici, nous définissons une classe nommée list, qui contient deux sous-classes : list-enter et list-leave-to . Ces classes sont automatiquement appliquées aux éléments de liste lorsqu'ils sont insérés ou supprimés.
Nous pouvons appliquer des animations de transition aux listes en utilisant l'élément
<ul> <transition name="list"> <li v-for="(item, index) in list" :key="index" v-on:click="removeItem(index)">{{item}}</li> </transition> </ul>
Ici, nous enveloppons la balise
L'effet final est que lorsque nous supprimons des éléments de liste, ils disparaissent de la page de manière dégradée au lieu de disparaître immédiatement.
Conclusion
En utilisant Vue, nous pouvons facilement restituer et gérer de grandes quantités de données et supprimer de manière proactive des éléments de la liste en définissant des méthodes. De plus, nous pouvons améliorer l'expérience utilisateur de la liste en ajoutant des transitions CSS et en utilisant l'élément
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!