Maison> interface Web> js tutoriel> le corps du texte

Exemples pour expliquer vue v-pour le traitement des données

小云云
Libérer: 2018-05-18 10:04:26
original
3648 Les gens l'ont consulté

Plus tôt, nous avons partagé avec vous l'introduction de la commande v for dans le composant vue et l'analyse des problèmes d'alarme lors de l'utilisation de v-for. Dans cet article, nous partagerons avec vous le traitement des données de vue v-for et son utilisation de base. de v-for : utilisez v- for="élément de la liste" ou v-for="élément de la liste" pour parcourir, utilisez list:list:[{n:1},{n:2},{n:3 },{n:4}, {n:5},{n:6}] est utilisé pour faciliter l'expansion et est plus proche des exigences réelles du projet.

  • {{item.n}}

Copier après la connexion

v-for donne deux paramètres clé et index

Ici, les données parcourues doivent être divisées en tableaux et objets et traitées séparément

Il n'y a pas de clé sous le tableau L'effet d'affichage réel de la valeur de la clé du paramètre peut être obtenu sous l'objet comme suit :

v-for prend en charge l'itération égale

  • {{item.n}}

    index={{ index }}

    key={{key}}

{{item}}:{{key}}:{{index}}

Copier après la connexion

v-for="n en 10"


Avec cela, vous pouvez charger les données étape par étape, contrôlez simplement la valeur m

Remarque :

{{list[i-1].n}}

Copier après la connexion

ne peut pas utiliser cette liaison lors de la traversée Les composants d'objets ne peuvent transmettre que l'index ou d'autres valeurs caractéristiques dans la fonction de traitement pour sélectionner la liste actuelle, puis opérer sur le tableau de données app.list [1]={n:33} L'opération d'affectation directe ne peut pas déclencher la page. update

Donc, vue js fournit la méthode de mise à jour des données du tableau de Vue.set(app.list,1,{n:33}>Recommandations associées :

  • {{item.n}}

    index={{ index }}

    key={{key}}

    remove this

Copier après la connexion
Introduction à la commande v for dans le composant vue et analyse des problèmes d'alarme lors de l'utilisation de v-for

Copier après la connexion
methods:{ removethis:function(index){ this.list.splice(index,1)
Copier après la connexion

Commandes courantes Vue.js Tutoriel sur l'utilisation de l'instruction v-for en boucle

Instruction vue.js v-pour l'utilisation et l'acquisition d'index

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!