Vue.js
Renderowanie listy
Szukaj…
Podstawowe użycie
Listę można wyświetlić za pomocą dyrektywy v-for
. Składnia wymaga podania tablicy źródłowej, na której ma odbywać się iteracja, oraz aliasu, który będzie używany do odwoływania się do każdego elementu w iteracji. W poniższym przykładzie używamy items
jako tablicy źródłowej, a item
jako aliasu dla każdego elementu.
HTML
<div id="app">
<h1>My List</h1>
<table>
<tr v-for="item in items">
<td>{{item}}</td>
</tr>
</table>
</div>
Scenariusz
new Vue({
el: '#app',
data: {
items: ['item 1', 'item 2', 'item 3']
}
})
Można zobaczyć demo pracuje tutaj .
Renderuj tylko elementy HTML
W tym przykładzie wyrenderuje pięć tagów <li>
<ul id="render-sample">
<li v-for="n in 5">
Hello Loop
</li>
</ul>
Lista odliczeń świń
<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/
Iteracja nad obiektem
v-for
może być użyte do iteracji po kluczach obiektu (i wartościach):
HTML:
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
Scenariusz:
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow