suchen

Heim  >  Artikel  >  Web-Frontend  >  Vue.JS-Einführungs-Tutorial zum Rendern von Listen

Vue.JS-Einführungs-Tutorial zum Rendern von Listen

高洛峰
高洛峰Original
2016-12-03 10:30:151325Durchsuche

Sie können die v-repeat-Direktive verwenden, um eine Liste basierend auf einem Array von Objekten in einem ViewModel zu rendern. Für jedes Objekt im Array erstellt diese Anweisung eine untergeordnete Vue-Instanz mit diesem Objekt als $data-Objekt. Diese untergeordneten Instanzen erben den Datenbereich der übergeordneten Instanz, sodass Sie innerhalb wiederholter Vorlagenelemente sowohl auf die Eigenschaften der untergeordneten Instanz als auch auf die Eigenschaften der übergeordneten Instanz zugreifen können. Darüber hinaus können Sie über die Eigenschaft $index auch den Array-Index abrufen, der der aktuellen Instanz entspricht. 

<ul id="demo">
 <li v-repeat="items" class="item-{{$index}}">
 {{$index}} - {{parentMsg}} {{childMsg}}
 </li>
</ul>
var demo = new Vue({
 el: &#39;#demo&#39;,
 data: {
 parentMsg: &#39;Hello&#39;,
 items: [
  { childMsg: &#39;Foo&#39; },
  { childMsg: &#39;Bar&#39; }
 ]
 }
})

Überprüfen Sie den Effekt, es sollte einfach sein, das Ergebnis zu erhalten

Wiederholung auf Blockebene

Manchmal müssen wir möglicherweise einen Block wiederholen, der mehrere Knoten enthält. In diesem Fall können wir den Block mit dem d477f9ce7bf77f53fbcf36bec1b69b7a-Tag umschließen. Das d477f9ce7bf77f53fbcf36bec1b69b7a-Tag spielt hier nur eine semantische Wrapping-Rolle und wird nicht selbst gerendert. Zum Beispiel: 

<ul>
 <template v-repeat="list">
 <li>{{msg}}</li>
 <li class="divider"></li>
 </template>
</ul>

Einfaches Wertearray

Einfacher Wert (Primitivwert), also Zeichenfolgen, Zahlen, Boolesche Werte usw. sind nicht der Wert des Objekts. Für Arrays, die einfache Werte enthalten, können Sie $value verwenden, um direkt auf den Wert zuzugreifen: 

<ul id="tags">
 <li v-repeat="tags">
 {{$value}}
 </li>
</ul>

new Vue({
 el: &#39;#tags&#39;,
 data: {
 tags: [&#39;JavaScript&#39;, &#39;MVVM&#39;, &#39;Vue.js&#39;]
 }
})

Manchmal möchten wir möglicherweise expliziter auf Variablen im aktuellen Bereich zugreifen als auf implizites Zurückgreifen auf den übergeordneten Bereich. Sie können dies tun, indem Sie der v-repeat-Direktive ein Argument bereitstellen und es als Alias ​​für das Element verwenden, über das iteriert werden soll: 


<ul id="users">
 <li v-repeat="user : users">
  {{user.name}} - {{user.email}}
 </li>
</ul>
>

Mutationsmethoden
Vue.js interne Mutationsmethoden für beobachtete Arrays (Mutationsmethoden, einschließlich push(), pop(), shift(), unshift(), splice(), sort() und reverse()) abgefangen wird, sodass der Aufruf dieser Methoden auch automatisch eine Ansichtsaktualisierung auslöst. 

var users = new Vue({
 el: &#39;#users&#39;,
 data: {
  users: [
   { name: &#39;Foo Bar&#39;, email: &#39;foo@bar.com&#39; },
   { name: &#39;John Doh&#39;, email: &#39;john@doh.com&#39; }
  ]
 }
});

Das Folgende ist ein Demonstrationsbeispiel. Wenn auf die Schaltfläche geklickt wird, wird das Datenelement entfernt 

// 以下操作会触发 DOM 更新
demo.items.unshift({ childMsg: &#39;Baz&#39; })
demo.items.pop()

Erweiterungsmethoden

Vue.js fügt dem beobachteten Array zwei praktische Methoden hinzu: $set() und $remove().

Sie sollten es vermeiden, Elemente in datengebundenen Arrays direkt per Index festzulegen, wie zum Beispiel demo.items[0] = {}, da diese Änderungen von Vue.js nicht erkannt werden können. Sie sollten die erweiterte Methode $set() verwenden: 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
 <ul id="tags">
  <li v-repeat="tags">
   {{$value}}
  </li>
 </ul>
 
 <input type="button" value="测试" onclick="myClick();">
<script>
 var tag = new Vue({
  el: &#39;#tags&#39;,
  data: {
   tags: [&#39;标签一&#39;, &#39;标签二&#39;, &#39;标签三&#39;]
  }
 });
 
 function myClick(){
  tag.tags.pop();
 }
</script>
</body>
</html>


$remove() ist nur syntaktischer Zucker für die Methode splice(). Dadurch wird das Element am angegebenen Index entfernt. Wenn das Argument kein numerischer Wert ist, durchsucht $remove() das Array nach dem Wert und entfernt das erste gefundene entsprechende Element. 

// 不要用 `demo.items[0] = ...`
demo.items.$set(0, { childMsg: &#39;Changed!&#39;})

// 删除索引为 0 的元素。
demo.items.$remove(0)

Array ersetzen
Wenn Sie nicht mutierende Methoden wie Filter( ), concat() oder Slice() wird das zurückgegebene Array eine andere Instanz sein. In diesem Fall können Sie das alte Array durch das neue Array ersetzen: Erneut rendern. Aber keine Sorge, Vue.js kann erkennen, ob ein Array-Element über eine zugehörige Vue-Instanz verfügt, und diese so effizient wie möglich wiederverwenden. 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
 <ul id="tags">
  <li v-repeat="tags">
   {{$value}}
  </li>
 </ul>
 
 <input type="button" value="测试" onclick="myClick();">
<script>
 var tag = new Vue({
  el: &#39;#tags&#39;,
  data: {
   tags: [&#39;标签一&#39;, &#39;标签二&#39;, &#39;标签三&#39;]
  }
 });
 
 function myClick(){
  //tag.tags.pop();
  //tag.tags[0] = &#39;修改后的内容不生效&#39;;
  tag.tags.$set(0, &#39;修改后的内容生效&#39;);
  tag.tags.$remove(1);
 }
</script>
</body>
</html>
Verwenden Sie Track-By (Track-By-Attribut in Vue)

In einigen Fällen müssen Sie das Array möglicherweise durch ein völlig neues Objekt ersetzen (z. B. das vom API-Aufruf zurückgegebene Objekt). Wenn jedes Ihrer Datenobjekte über ein eindeutiges ID-Attribut verfügt, können Sie den Track-by-Attributparameter verwenden, um Vue.js einen Hinweis zu geben, damit vorhandene Vue-Instanzen und DOM-Knoten mit derselben ID wiederverwendet werden können.

Zum Beispiel: Ihre Daten sehen so aus 


demo.items = demo.items.filter(function (item) {
 return item.childMsg.match(/Hello/)
})

Dann können Sie eine Eingabeaufforderung wie diese geben:


Wenn Vue.js beim Ersetzen des Elementarrays auf ein neues Objekt mit der _uid: „88f869d“ trifft, weiß es, dass es dieselbe _uid direkt wiederverwenden kann. Es gibt bereits Instanzen. Durch die ordnungsgemäße Verwendung von Track-by kann die Leistung beim erneuten Rendern großer V-Wiederholungslisten mit neuen Daten erheblich verbessert werden.

Über Objekte iterieren
{
 items: [
 { _uid: &#39;88f869d&#39;, ... },
 { _uid: &#39;7496c10&#39;, ... }
 ]
}
Sie können V-Repeat auch verwenden, um über alle Eigenschaften eines Objekts zu iterieren. Jede doppelte Instanz verfügt über ein spezielles Attribut $key. Für einfache Werte können Sie auch die Eigenschaft $value verwenden, genau wie beim Zugriff auf einfache Werte in einem Array. 

<div v-repeat="items" track-by="_uid">
 <!-- content -->
</div>

In ECMAScript 5 zum Hinzufügen einer neuen Eigenschaft zu einem Objekt oder zum Entfernen einer neuen Eigenschaft aus dem Objektattribut gibt es keinen Mechanismus, um beide Situationen zu erkennen. Um dieses Problem zu lösen, werden dem beobachteten Objekt in Vue.js drei Erweiterungsmethoden hinzugefügt: $add(key, value), $set(key, value) und $delete(key). Mit diesen Methoden können entsprechende Ansichtsaktualisierungen ausgelöst werden, wenn Eigenschaften des beobachteten Objekts hinzugefügt/entfernt werden. Der Unterschied zwischen den Methoden $add und $set besteht darin, dass $add früh zurückkehrt, wenn der angegebene Schlüssel bereits im Objekt vorhanden ist, sodass der Aufruf von obj.$add(key) den vorhandenen Wert nicht mit undefiniert überschreibt.

Iterationsbereich

v-repeat kann auch eine ganze Zahl akzeptieren. In diesem Fall wird eine Vorlage mehrmals angezeigt. Das folgende Beispiel wird dreimal iteriert. 


<ul id="repeat-object">
 <li v-repeat="primitiveValues">{{$key}} : {{$value}}</li>
 <li>===</li>
 <li v-repeat="objectValues">{{$key}} : {{msg}}</li>
</ul>

new Vue({
 el: &#39;#repeat-object&#39;,
 data: {
  primitiveValues: {
   FirstName: &#39;John&#39;,
   LastName: &#39;Doe&#39;,
   Age: 30
  },
  objectValues: {
   one: {
    msg: &#39;Hello&#39;
   },
   two: {
    msg: &#39;Bye&#39;
   }
  }
 }
});

Array-Filter

Manchmal müssen wir nur die gefilterten oder sortierten Ergebnisse einer Array-Version anzeigen ohne die ursprünglichen Daten tatsächlich zu ändern oder zurückzusetzen. Vue bietet zwei integrierte Filter, um solche Anforderungen zu vereinfachen: filterBy und orderBy.


Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Studium aller hilfreich sein


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vue.JS Einführungs-Tutorial zur EreignisüberwachungNächster Artikel：Vue.JS Einführungs-Tutorial zur Ereignisüberwachung

In Verbindung stehende Artikel

Mehr sehen