循环语句

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">
: K9 M- q, D/ I" r# J4 Q2 ]
<ul>" c, D' ~6 M q" o* M9 G, f
<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">
7 x+ G5 E3 J9 D4 u0 p, ?
{{ value }}
6 b8 Q9 I- ~+ X H* A( ?
</li>, N! v$ B" Y. ~; s( D+ N5 Q9 O
</ul>" i' \. B% g" D/ G* x6 b
</div>0 M. A* h' w+ j. l% U+ w4 @
) J3 L7 B' s* j& v. ]) M7 r" b/ O
<script>: t4 W: y9 I2 v. g! w- Y7 X, c
new Vue({
; b E) |% S+ q$ t
el: '#app',5 i7 K v: t! {+ }! S( f
data: {
: b! y0 F" e2 v5 Z$ y" C3 A
object: {
8 u- ?4 J( s; Q' I- S- k* y* p: [
name: '菜鸟教程',6 R; d; j0 Y! K4 o6 u
url: 'http://www.runoob.com',4 a% r4 s# w; R4 L1 o
slogan: '学的不仅是技术，更是梦想！'
: ]- j/ f9 M1 z- e, ?/ n
}
* \0 D- R9 C/ m1 T
}
5 d1 X! T9 Y" w8 C+ C" X1 S- _
})2 I R R$ e2 |# V1 `) I
</script></div><div></div>