cncml手绘网

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

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

循环使用 v-for 指令。

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

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

v-for 指令

<div id="app">
; U2 }; K" z( }& R" P
<ol>
: K' J% {; L; I, Z
<li v-for="site in sites">7 `& N1 i6 O; U, N
{{ site.name }}
- g3 ^" \+ T2 m/ x# v8 O7 `" Y
</li>
( o6 \* ?0 m! o# Y ]. }& V# W
</ol>3 p2 }8 H( N5 n1 |/ z# s3 J5 Y I
</div>+ u0 F2 y* h4 J+ N+ [: b
: F( t# V0 X; C) `6 W2 a$ l
<script>
/ l4 P1 T. R$ y
new Vue({
2 N4 v0 z% I7 }! n, z4 u
el: '#app',9 l% }+ h) ]9 S$ o3 A7 G
data: {$ Q3 ^ Y/ Y: C$ B" v
sites: [1 X1 p! K& q7 n- F% Q# Z
{ name: 'Runoob' }," b* z, R$ r* g# L i
{ name: 'Google' },
* B2 a+ w. N/ J" g" L) f- ]
{ name: 'Taobao' }
7 ]: ]" Z9 l; T) Z
]! s x. J- I. {: Q
}
% ]* M) w/ X; t
})
5 }1 w2 L. ~- i7 ?
</script>

复制代码

模板中使用 v-for：

v-for

<ul>/ @0 m8 m, n# O! m0 \9 T% n& q
<template v-for="site in sites">& a( A# p5 H; Z3 c
<li>{{ site.name }}</li>
8 x2 d: V! E D6 e7 G, f% t7 P
<li>--------------</li>
& I6 g7 O$ d& D0 M
</template>( ~4 a/ E$ B( x5 E
</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;"> T% S5 @. I* I) X3 \. D& {- T
</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;">
. } I( ^' l* I2 P; H( o
</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;">
; m: U% N! _1 V
{{ value }}
/ Z5 U' z3 D0 f7 [- Z9 h0 ~
</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;">
5 y. q* n l9 B6 W, d
</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;">4 @5 l' ~9 k5 e) l
</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;">
4 @( ]% K# O8 t \, b+ P
2 w( s5 n. v" w7 M) 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;">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;">
8 }$ R) z. H5 ~; N% ^8 s
new Vue({( }. ~( q# ]' v1 B I5 }
el: '#app',5 V. Z0 i7 N) P" p
data: {9 }+ F3 z8 t& T
object: {
( V$ s; H8 @. t* W) j3 d
name: '菜鸟教程',
/ d7 B7 l U/ r; U3 w1 Y
url: 'http://www.runoob.com',- d, d8 K* S7 s2 @' x1 E
slogan: '学的不仅是技术，更是梦想！'
; f* j* o- Z2 B/ x+ U; x3 c! u8 {
}4 p+ ?) Y5 F8 p1 r: _1 M
}) c& f' L+ ?3 Y0 u& F, T6 M
}): S* x, G4 V7 ~3 F. D4 ?" K
</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">
) M; H% `" C. I" r6 [& ]
<ul># l0 `! P- H1 d' M; U, A1 ^; e
<li v-for="(value, key) in object">/ u: o2 Q) m# t; R
{{ key }} : {{ value }}- i9 X) }# W7 o$ O- s# p2 g8 ~ D
</li>' b7 G3 r+ L# D3 |: m3 f7 F; ~: t
</ul>: l, i. a$ D6 R h0 f
</div>

复制代码

第三个参数为索引：

v-for

<div id="app">6 K' K: V& I3 Z$ c- i4 j
<ul>
7 f, d2 v K/ O8 o4 l& ?! d
<li v-for="(value, key, index) in object">3 P0 w- L" w* u; \: k
{{ index }}. {{ key }} : {{ value }}
) `# g0 ~& C) W6 i4 K
</li>* {( A5 T7 J7 i0 u
</ul>
. O \6 h" A r/ `
</div>

复制代码

v-for 迭代整数

v-for 也可以循环整数

v-for

<div id="app">
4 O9 z& _. _; f# C# z9 t5 x- E: @
<ul>
5 S; Q$ r M; `" a
<li v-for="n in 10">
( F1 Y) n* n& L2 @0 j
{{ n }}
1 b: x. Y D6 A/ O
</li>, T' d# z" |. T4 Z2 x
</ul>
' c4 P9 X& v3 X3 q6 {
</div>

复制代码

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

Powered by Discuz! X3.2