Vue.js Schleifenanweisungen

In Vue werden Schleifenanweisungen hauptsächlich durch die v-for-Direktive implementiert, mit der Arrays oder Objekte durchlaufen werden, wodurch eine entsprechende Anzahl von Elementen generiert wird.

Verwende die v-for-Direktive an einem Element, um Elemente basierend auf dem Quelldaten-Array oder -Objekt in einer Schleife zu rendern.

Durchlaufen eines Arrays:

v-for="(item, index) in items"

Durchlaufen eines Objekts:

v-for="(value, key, index) in object"

  • Die Rolle von keyVerwenden von :v-forBeim Rendern einer Liste musst du ein eindeutigeskeyAttribut angeben, damit Vue die Eindeutigkeit jedes Elements erkennen und effiziente DOM-Aktualisierungen durchführen kann.

  • Verschachtelte Schleifen: Mehrere können verschachtelt werdenv-forum mehrdimensionale Arrays oder Objektstrukturen zu rendern.

v-for kann Daten an ein Array binden, um eine Liste zu rendern:

v-for-Beispiel

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Example' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Selbst ausprobieren »

v-for unterstützt außerdem einen optionalen zweiten Parameter, dessen Wert der Index des aktuellen Elements ist:

v-for-Beispiel

index ist der Indexwert des Listenelements:

<div id="app">
  <ol>
    <li v-for="(site, index) in sites">
      {{ index }} -{{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Example' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Selbst ausprobieren »

Verwendung von v-for im <template>-Element:

v-for

<ul> <template v-for="site in sites"> <li>{{ site.text }}</li> <li>--------------</li> </template> </ul>

Selbst ausprobieren »

v-for-Iteration über Objekte

v-for kann Daten anhand der Eigenschaften eines Objekts durchlaufen:

v-for

<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script>const app = { data() { return { object: { name: 'Rookie Tutorial', url: 'http://www.example.com', slogan: 'Was du lernst, ist nicht nur Technologie, sondern auch Träume!' } } } } Vue.createApp(app).mount('#app')</script>

Selbst ausprobieren »

Sie können den zweiten Parameter auch als Schlüsselnamen angeben:

v-for

<div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div>

Selbst ausprobieren »

Der dritte Parameter ist der Index:

v-for

<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div>

Selbst ausprobieren »

v-for Iterieren über Ganzzahlen

v-for kann auch über Ganzzahlen iterieren

v-for

<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>

Selbst ausprobieren »

Anzeigen von gefilterten/sortierten Ergebnissen

Wir können die Elemente eines Arrays verarbeiten, bevor wir sie anzeigen. Im Allgemeinen können wir eine berechnete Eigenschaft erstellen, um das gefilterte oder sortierte Array zurückzugeben.

v-for-Beispiel

Geben Sie die geraden Zahlen im Array aus:

<div id="app"> <ul> <li v-for="n in evenNumbers">{{ n }}</li> </ul> </div>

Selbst ausprobieren »

Gemeinsame Verwendung von v-for/v-if

Das obige Beispiel verwendet v-for/v-if zusammen, um einen Standardwert für das select festzulegen:

v-for/v-if Beispiel

v-for durchläuft die Liste, v-if setzt den ausgewählten Wert:

<div id="app"> <select @change="changeVal($event)" v-model="selOption"> <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id"> <!--Das Element mit Index 1 wird als Standardwert festgelegt; Indexwerte beginnen bei 0.--> <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option> <option v-else :value="site.name">{{site.name}}</option> </template> </select> <div>Sie haben ausgewählt: {{selOption}}</div> </div> <script>const app = { data() { return { selOption: "Example", sites: [ {id:1,name:"Google"}, {id:2,name:"Example"}, {id:3,name:"Taobao"}, ] } }, methods:{ changeVal:function(event){ this.selOption = event.target.value; alert("you选Mediumalready"+this.selOption); } } } Vue.createApp(app).mount('#app')</script>

Selbst ausprobieren »

Verwendung von v-for bei Komponenten

Wenn Sie noch nichts über Komponenten gelernt haben, können Sie diesen Abschnitt überspringen.

Bei benutzerdefinierten Komponenten können Sie v-for genauso wie bei jedem normalen Element verwenden:

<my-component v-for="item in items" :key="item.id"></my-component>

Es werden jedoch keine Daten automatisch an die Komponente übergeben, da die Komponente einen eigenen unabhängigen Gültigkeitsbereich hat. Um die iterierten Daten an die Komponente zu übergeben, müssen wir props verwenden:

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

Der Grund dafür, item nicht automatisch in die Komponente einzuspeisen, ist, dass dies die Komponente eng an die Funktionsweise von v-for koppeln würde. Die Datenquelle der Komponente explizit zu machen, ermöglicht es, die Komponente in anderen Situationen wiederzuverwenden.

Unten folgt ein vollständiges Beispiel für eine einfache Todo-Liste:

Beispiel

<div id="todo-list-example"> <form v-on:submit.prevent="addNewTodo"> <label for="new-todo">Eine Aufgabe hinzufügen</label> <input v-model="newTodoText" id="new-todo" placeholder="z. B. Die Katze füttern" /> <button>Hinzufügen</button> </form> <ul> <todo-item v-for="(todo, index) in todos" :key="todo.id" :title="todo.title" @remove="todos.splice(index, 1)" ></todo-item> </ul> </div>

Selbst ausprobieren »
Andere Erweiterungen