Vue.js
Lista rendering
Sök…
Grundläggande användning
En lista kan återges med v-for
direktivet. Syntaxen kräver att du anger källarray för att iterera på, och ett alias som kommer att användas för att referera till varje objekt i iterationen. I följande exempel använder vi items
som källarray och item
som alias för varje objekt.
html
<div id="app">
<h1>My List</h1>
<table>
<tr v-for="item in items">
<td>{{item}}</td>
</tr>
</table>
</div>
Manus
new Vue({
el: '#app',
data: {
items: ['item 1', 'item 2', 'item 3']
}
})
Du kan se en fungerande demo här .
Gör bara HTML-objekt
I det här exemplet kommer fem <li>
-taggar att visas
<ul id="render-sample">
<li v-for="n in 5">
Hello Loop
</li>
</ul>
Nedräkningslista för gris
<ul>
<li v-for="n in 10">{{11 - n}} pigs are tanning at the beach. One got fried, and
</ul>
https://jsfiddle.net/gurghet/3jeyka22/
Iteration över ett objekt
v-for
kan användas för att iterera över ett objektstangenter (och värden):
HTML:
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
Manus:
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow