Vue.js
Список рендеринга
Поиск…
Основное использование
Список может отображаться с помощью директивы v-for
. Синтаксис требует, чтобы вы указывали исходный массив для итерации и псевдоним, который будет использоваться для ссылки на каждый элемент в итерации. В следующем примере мы используем items
как исходный массив, а item
как псевдоним для каждого элемента.
HTML
<div id="app">
<h1>My List</h1>
<table>
<tr v-for="item in items">
<td>{{item}}</td>
</tr>
</table>
</div>
скрипт
new Vue({
el: '#app',
data: {
items: ['item 1', 'item 2', 'item 3']
}
})
Вы можете просмотреть рабочую демку здесь .
Отображать только элементы HTML
В этом примере будет отображаться пять тегов <li>
<ul id="render-sample">
<li v-for="n in 5">
Hello Loop
</li>
</ul>
Список обратного отсчета свиней
<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/
Итерация по объекту
v-for
может использоваться для итерации над объектными ключами (и значениями):
HTML:
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
Автор сценария:
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow