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

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.

 <p id="app">
        <ul>
            <li v-for="item in list">{{item.n}}</li>
        </ul>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}]
            }
        })
    </script>

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

<p id="app">
        <ul>
            <li v-for="(item,index,key) of list">{{item.n}}
                <p>index={{ index }}</p>
                <p>key={{key}}</p>
            </li>
        </ul>
        <p>
            <p v-for="(item,key,index) of obj">
                {{item}}：{{key}}：{{index}}
            </p>
        </p>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
                obj:{color:'red',age:18,sex:'girl'}
            }
        })
    </script>

v-for="n en 10"

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

Remarque :

  <p v-for="i of m">
                {{list[i-1].n}}
            </p>
    </p>
    </body>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                m:3,
                list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
                obj:{color:'red',age:18,sex:'girl'}
            }
        })
    </script>

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 :

<ul>
            <li v-for="(item,index,key) of list">{{item.n}}
                <p>index={{ index }}</p>
                <p>key={{key}}</p>
                <p v-on:click="removethis(index)">remove this</p>
            </li>
        </ul>

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

<br>

methods:{
         removethis:function(index){
             this.list.splice(index,1)

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!