So kehren Sie ein Array in Vue um

Vue kann die „v-for“-Anweisung und berechnete Eigenschaften verwenden, um das Array umzukehren, die Syntax „

“ und „computed:{reverseDIV(){return this. Elemente .reverse()}}".

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

vue-Methode zum Umkehren des Arrays

Methode eins:

<template>
    <div>
        <div v-for="item in Array.prototype.reverse.call(items)">
            <li>{{item}}</li>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: "List",
        data(){
            return{
                items:[1,2,3,4]
            }
        },
 
    }
</script>

Methode zwei (berechnetes Attribut):

<template>
    <div>
        <div v-for="item in reverseDIV">
            <li>{{item}}</li>
        </div>
    </div>
</template>
 
<script>
    export default {
        name: "List",
        data() {
            return {
                items: [1, 2, 3, 4]
            }
        },
        computed: {
            reverseDIV() {
                return this.items.reverse()
            }
        }
    }
</script>

Beschreibung: Berechnetes Attribut

Typ: { [Schlüssel: Zeichenfolge] : Funktion |. { get: Function, set: Function } }

Details:

Berechnete Eigenschaften werden in Vue-Instanzen gemischt. Der This-Kontext aller Getter und Setter ist automatisch an die Vue-Instanz gebunden.

Beachten Sie, dass, wenn Sie eine Pfeilfunktion für eine berechnete Eigenschaft verwenden, diese nicht auf die Instanz der Komponente zeigt, Sie aber dennoch auf deren Instanz als ersten Parameter der Funktion zugreifen können.

computed: {
  aDouble: vm => vm.a * 2
}

Die Ergebnisse der berechneten Eigenschaften werden zwischengespeichert und nicht neu berechnet, es sei denn, die abhängigen Reaktionseigenschaften ändern sich. Beachten Sie, dass die berechnete Eigenschaft nicht aktualisiert wird, wenn eine Abhängigkeit (z. B. eine nicht reaktive Eigenschaft) außerhalb des Gültigkeitsbereichs der Instanz liegt.

Hauptsächlich eine Reihe von Vorgängen, die wir durchführen, ohne die Quelldaten zu verschmutzen

[Verwandte Empfehlungen: vue.js-Tutorial]

Das obige ist der detaillierte Inhalt vonSo kehren Sie ein Array in Vue um. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!