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!
