Heim >Web-Frontend >js-Tutorial >Beispielcode für eine Schleife mit der V-for-Anweisung
In diesem Artikel werden Ihnen hauptsächlich relevante Informationen zu den allgemeinen Anweisungen von Vue.js und der Schleifenverwendung von V-for-Anweisungen vorgestellt. Der Artikel stellt sie ausführlich anhand des Beispielcodes vor, der für jeden einen gewissen Referenz- und Lernwert hat . Freunde, die es brauchen. Werfen wir einen Blick unten.
Vorwort
In Vue.js erfordert die v-for-Direktive eine spezielle Syntax in Form von „item in items“, also der Quelle dataArray und item ist ein Alias für die Array-Element-Iteration.
v-for kann Daten an ein Array binden, um eine Liste zu rendern:
<p id="wantuizhijia"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </p> <script> new Vue({ el: '#wantuizhijia', data: { sites: [ { name: '网推之家' }, { name: '谷歌' }, { name: '淘宝' } ] } }) </script>
Ausgabe:
Verwenden Sie V-for in der Vorlage:
<p id="wantuizhijia"> <ul> <template v-for="place in places"> <li>{{ place.name }}</li> <li>--------------</li> </template> </ul> </p> <script> new Vue({ el: '#wantuizhijia', data: { places: [ { name: '厦门' }, { name: '漳州' }, { name: '福州' } ] } }) </script>
Wirkung:
v-for kann ein Objekt übergeben Attribute zum Iterieren von Daten:
<p id="wangtuizhijia"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </p> <script> new Vue({ el: '#wangtuizhijia', data: { object: { name: '脚本之家', url: 'www.jb51.net', slogan: '美好生活,等待你的开创!' } } }) </script>
Wirkung:
Skript Startseite
www.jb51.net
Ein wundervolles Leben wartet darauf, dass du es erschaffst!
v-for iteriert Daten durch die Eigenschaften eines Objekts. Sie können den zweiten Parameter als Schlüsselnamen angeben:
<p id="wangtuizhijia"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </p> <script> new Vue({ el: '#wangtuizhijia', data: { object: { name: '脚本之家', url: 'www.jb51.net', slogan: '美好生活,等待你的开创!' } } }) </script>
Effekt:
Name: Script Home
URL: www.jb51.net
Slogan: Ein besseres Leben wartet darauf, dass du es erschaffst!
v-for iteriert Daten durch die Eigenschaften eines Objekts und verwendet dabei den dritten Parameter als Index :
<p id="wangtuizhijia"> <ul> <li v-for="(value, key, index) in object"> {{ index }} {{ key }}:{{ value }} </li> </ul> </p> <script> new Vue({ el: '#wangtuizhijia', data: { object: { name: '脚本之家', url: 'www.jb51.net', slogan: '美好生活,等待你的开创!' } } }) </script>
Effekt:
0 Name:Script House
1 URL:www.jb51 . net
2 Slogan: Ein besseres Leben wartet darauf, dass du es erschaffst!
v-for kann auch Ganzzahlen schleifen
<p id=”wangtuizhijia”> <ul> <li v-for=”n in 10″> {{ n }} </li> </ul> </p> <script> new Vue({ el: ‘#wangtuizhijia' }) </script> </body>
Wirkung:
1
2
3
4
5
6
7
8
9
10
Das obige ist der detaillierte Inhalt vonBeispielcode für eine Schleife mit der V-for-Anweisung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!