cncml手绘网

标题: 循环语句 [打印本页]

作者: admin 时间: 2018-7-4 10:56
标题: 循环语句

循环使用 v-for 指令。

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

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

v-for 指令

<div id="app">
1 O) i' f9 E" W
<ol>
6 U5 D: b$ ~3 r# [0 U b- L$ ~
<li v-for="site in sites">* S& ]7 Y% H+ O8 S
{{ site.name }}/ ^; ~$ S9 C4 \% x& @
</li>
& L O2 K1 |0 G* ^- o, [0 P. [0 U5 f
</ol>
, r( w5 X" c% z) ^
</div># r, E. o0 g$ N. `- e1 D: C1 K
- E- k4 C* M& i' q/ n" g0 I
<script>
2 X" |# t: [ z7 R1 r5 x
new Vue({, A$ n. X$ s) d
el: '#app',
4 c' \! u! l7 R2 ^, A% J% H
data: {
# H& s9 o: ~3 W8 V" @5 L8 G$ i* q0 L
sites: [
# i2 u% u! G+ [/ P* C0 f
{ name: 'Runoob' },7 q% ~4 I. k0 ?
{ name: 'Google' },
2 d& Y+ v9 F1 x0 v8 X
{ name: 'Taobao' }
, R: A s; ~9 n8 X$ Y0 Q" J" ]
]$ a$ A3 E# |) J* `+ c% O
}. e" T6 M& r0 E- @" m) C4 v
})
2 g! F9 D1 l0 }+ {
</script>

复制代码

模板中使用 v-for：

v-for

<ul>" M; N9 D- t/ ^( T. P
<template v-for="site in sites">
1 o* P: C2 P8 t9 H5 r8 U3 K
<li>{{ site.name }}</li>
3 W" U; y) ~4 Q, f" Q- n
<li>--------------</li>
l" }) q) O6 [) d
</template>0 v* P, E! z! _9 V' d" a
</ul>

复制代码

v-for 迭代对象

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

v-for

<div><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">div</span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"> </span><span class="hl-var" style="border: 0px; color: rgb(0, 0, 139); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">id</span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">=</span><span class="hl-quotes" style="border: 0px; color: rgb(139, 0, 0); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><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</span><span class="hl-quotes" style="border: 0px; color: rgb(139, 0, 0); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
7 Z1 A$ S8 r! S: L: F+ \- [
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">ul</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
/ c2 X# O) S7 G9 f! p
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">li</span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"> </span><span class="hl-var" style="border: 0px; color: rgb(0, 0, 139); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">v-for</span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">=</span><span class="hl-quotes" style="border: 0px; color: rgb(139, 0, 0); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><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</span><span class="hl-quotes" style="border: 0px; color: rgb(139, 0, 0); font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
# w, }9 `9 B' z4 z4 r0 t" X9 |1 P
{{ value }}
3 _3 T; V/ d; x' ]) \& a- c4 @% G
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">li</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">6 q: l* e* E ~
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">ul</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">8 y3 }0 p. t% U3 L0 s8 s* Q3 U6 V
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">div</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">" s* W" u* e) r% S9 T0 X
$ m. X0 `' M- T9 e% X* {; d' u
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">script</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">
- @+ z( I& `( {. n. ~% d# H/ f
new Vue({
" L Y+ J% D( v( l/ w
el: '#app',' `: B h" l) N! B3 p
data: {
: s$ c+ [4 `5 D: ~
object: {
9 i$ h1 E3 R* z
name: '菜鸟教程',- V. T/ l3 b. P4 }0 C
url: 'http://www.runoob.com',' k- J) T B( E8 p1 L* I8 ~
slogan: '学的不仅是技术，更是梦想！'
! w% H$ e& V6 f! U+ @
}
) Z- q/ ~' s9 q" r. D! V5 P& g& s
}
2 W* w! q$ `! y
})! O+ P/ i1 o: K' }: c+ a
</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">script</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 13.2px; white-space: pre-wrap;">></span></div><div></div>

复制代码

你也可以提供第二个的参数为键名：

v-for

<div id="app">5 ]9 j0 T( M0 M$ } ]
<ul>
! _# l; \& R7 @3 ]6 T4 |$ _: B
<li v-for="(value, key) in object">
( Y: @# K0 t; A& _" c n& y6 @
{{ key }} : {{ value }}
; S! P, \+ R2 ^
</li>8 R$ G7 N9 y5 }3 v
</ul>3 Q% O" `- K" b g9 x! G- @: j
</div>

复制代码

第三个参数为索引：

v-for

<div id="app">! s7 W. }0 D3 B, H( \+ o7 Q8 j& i
<ul>6 b% _3 `0 k& j. Q
<li v-for="(value, key, index) in object">
" X0 G. R) k: r0 c( i# ~
{{ index }}. {{ key }} : {{ value }}
) \0 F- ~9 c6 K5 {; ]
</li>) z) M. w5 A9 z1 f
</ul>
8 A" P+ I* h0 j0 h+ W
</div>

复制代码

v-for 迭代整数

v-for 也可以循环整数

v-for

<div id="app">
; r+ [& K+ L& y1 H3 N5 R
<ul>
$ D9 j; {# o; H" {& B X& _9 [, q
<li v-for="n in 10">
9 C0 G0 M4 ~! Q' S A' ]5 z; q
{{ n }}
' I7 W P5 ?0 b* n1 o4 @
</li>
; ?1 u9 n' A y, Z2 r8 Z
</ul>
+ U9 Q7 @. C1 Q$ |1 |, x" }+ a
</div>

复制代码

欢迎光临 cncml手绘网 (http://bbs.cncml.com/)

Powered by Discuz! X3.2