Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zu den allgemeinen Anweisungen von Vue.js und der Schleifenverwendung von V-for-Anweisungen vor. Der Artikel stellt sie detailliert anhand des Beispielcodes vor, der für jeden einen gewissen Referenz- und Lernwert hat . Freunde, die es brauchen. Schauen wir uns unten um.
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:
V-for in der Vorlage verwenden:
<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 Daten über die -Eigenschaft eines Objekts iterieren:
<p id="wangtuizhijia"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </p> <script> new Vue({ el: '#wangtuizhijia', data: { object: { name: '脚本之家', url: 'http://www.jb51.net', slogan: '美好生活,等待你的开创!' } } }) </script>
Effekt:
Script Home
http://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: 'http://www.jb51.net', slogan: '美好生活,等待你的开创!' } } }) </script>
Effekt:
Name: Script House
URL: http://www.jb51.net
Slogan: Ein besseres Leben wartet darauf, dass Sie es schaffen!
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: 'http://www.jb51.net', slogan: '美好生活,等待你的开创!' } } }) </script>
Effekt:
0 Name: Script House
1 URL: http://www.jb51.net
2 Slogan: Ein besseres Leben wartet darauf, dass Sie es schaffen!
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
Zusammenfassung
Das obige ist der detaillierte Inhalt vonAllgemeine Anweisungen für Vue.js – Tutorial zum Schleifen der V-for-Anweisung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!