循环语句

admin · 发表于 2018-7-4 10:56:27

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

v-for 指令

复制代码

模板中使用 v-for：

v-for

复制代码

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据：

v-for

<div><div id="<span class="hl-string" style="border: 0px; color: rgb(170, 17, 17); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">app">
9 `! L8 j& Q. ^% T
<ul>' s9 E1 z! p* R; z( }
<li v-for="<span class="hl-string" style="border: 0px; color: rgb(170, 17, 17); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">value in object">
) D* U, R |: s G
{{ value }}
" H% p' V1 C( n5 A1 a
</li>
4 z. _% ^' ^+ g9 l
</ul>
3 l4 o! y' A% k# o; b7 j7 e; N8 \
</div>
: c3 q1 ]- d# f6 h( x: \7 h9 U, I
# P! Q* c7 w7 I7 R( G
<script># D% c( B+ U, ]8 o+ F) o
new Vue({
) `% W% t& n2 |
el: '#app',0 [3 D9 O' z- j
data: {
- F# N% l8 i1 w; I: c3 T
object: {
/ \4 Y; o: M0 b. M1 D/ ~
name: '菜鸟教程',7 y* ~$ B: ^% Q3 j* e
url: 'http://www.runoob.com',
$ P7 ?* j# i: v" i) H' r
slogan: '学的不仅是技术，更是梦想！'& L' t* ?# s7 N' C6 L
}
9 r% J4 p% k3 i/ l# U, x1 o% D
}
! l. \2 c! |% S
})
! l1 U5 R. u, }/ \/ @- ?- O7 x. w
</script></div><div></div>