Vue.js
Elenco di rendering
Ricerca…
Uso di base
Un elenco può essere reso utilizzando la direttiva v-for
. La sintassi richiede che venga specificato l'array di origine su cui eseguire l'iterazione e un alias che verrà utilizzato per fare riferimento a ciascun elemento nell'iterazione. Nell'esempio seguente vengono utilizzati items
come matrice di origine e item
come alias per ciascun elemento.
HTML
<div id="app">
<h1>My List</h1>
<table>
<tr v-for="item in items">
<td>{{item}}</td>
</tr>
</table>
</div>
copione
new Vue({
el: '#app',
data: {
items: ['item 1', 'item 2', 'item 3']
}
})
Puoi vedere una demo funzionante qui .
Mostra solo elementi HTML
In questo esempio verranno visualizzati cinque tag <li>
<ul id="render-sample">
<li v-for="n in 5">
Hello Loop
</li>
</ul>
Elenco di conto alla rovescia di maiale
<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/
Iterazione su un oggetto
v-for
può essere usato per iterare su un oggetto chiavi (e valori):
HTML:
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
script:
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow