Beispiele zur Erläuterung von vue v-für die Datenverarbeitung

Zuvor haben wir Ihnen die Einführung des v-for-Befehls in der Vue-Komponente und die Analyse von Alarmproblemen bei der Verwendung von v-for mitgeteilt. In diesem Artikel werden wir Ihnen die vue v-for-Datenverarbeitung und die grundlegende Verwendung vorstellen von v-for: Verwenden Sie zum Durchlaufen v-for="Element in der Liste" oder v-for="Element der Liste", verwenden Sie list:list:[{n:1},{n:2},{n:3 },{n:4}, {n:5},{n:6}] wird zur Erleichterung der Erweiterung verwendet und entspricht eher den tatsächlichen Projektanforderungen.

 <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 gibt zwei Parameter Schlüssel und Index an

Die durchlaufenen Daten müssen in Arrays und Objekte unterteilt und separat behandelt werden

Es gibt keinen Schlüssel unter Array Der tatsächliche Anzeigeeffekt des Parameterschlüsselwerts kann unter dem Objekt wie folgt ermittelt werden:

v-for unterstützt die gleiche Iteration

<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 in 10"

<br>Damit können Sie Daten Schritt für Schritt laden und den m-Wert steuern.

Hinweis:

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

Diese Bindung kann nicht verwendet werden, wenn Beim Durchlaufen von Objekten können Sie in der Verarbeitungsfunktion nur einen Index oder andere charakteristische Werte übergeben, um die aktuelle Liste auszuwählen, und dann das Datenarray app.list [1]={n:33} direkt zuweisen Seitenaktualisierung kann nicht ausgelöst werden

Vue js bietet also die Array-Datenaktualisierungsmethode von Vue.set(app.list,1,{n:33} 🎜>

Verwandte Empfehlungen:

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

<br>

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

Einführung in den v-for-Befehl in der Vue-Komponente und Analyse von Alarmproblemen bei der Verwendung von v-for

Allgemeine Vue.js-Befehle Tutorial zur Verwendung der v-for-Anweisung in einer Schleife

vue.js-Anweisung v-zur Verwendung und Indexerfassung

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung von vue v-für die Datenverarbeitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!