Vue.js
Representación de lista
Buscar..
Uso básico
Se puede representar una lista usando la directiva v-for
. La sintaxis requiere que especifique la matriz de origen para iterar, y un alias que se usará para hacer referencia a cada elemento en la iteración. En el siguiente ejemplo, usamos items
como la matriz de origen, y item
como el alias para cada elemento.
HTML
<div id="app">
<h1>My List</h1>
<table>
<tr v-for="item in items">
<td>{{item}}</td>
</tr>
</table>
</div>
Guión
new Vue({
el: '#app',
data: {
items: ['item 1', 'item 2', 'item 3']
}
})
Puedes ver una demostración de trabajo aquí .
Solo renderizar elementos HTML
En este ejemplo se renderizarán cinco etiquetas <li>
<ul id="render-sample">
<li v-for="n in 5">
Hello Loop
</li>
</ul>
Lista de cuenta atrás de cerdo
<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/
Iteración sobre un objeto
v-for
puede utilizarse para iterar sobre un objeto claves (y valores):
HTML:
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
Guión:
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow