cncml手绘网

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

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

循环使用 v-for 指令。

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

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

v-for 指令

<div id="app">: j$ V+ T+ P1 x$ i+ U* H& X- p0 h
<ol>5 h, t( C( b7 [% C8 e# N
<li v-for="site in sites">
. P2 W0 I2 B* Z. |/ o) k8 c" @
{{ site.name }}
: u2 k, U# g' P a; d7 h
</li>
* K( ^# R9 s# t3 s# g
</ol>" }) P5 k6 q% I' M5 U% M! F- @* n
</div>
) \, S: P1 j* _
7 E) w [7 j9 Y% m4 n0 z9 y! y
<script>) ~. h9 I0 W3 E7 {: T4 M
new Vue({" k* G2 U: P( Q; a
el: '#app', H6 k( ]- s+ ?, K# t8 ]
data: {; N, u. c( T/ F% U( a- N$ F
sites: [1 H2 P1 v& j s
{ name: 'Runoob' },
! Y% l1 W/ m8 N1 D, p5 R
{ name: 'Google' },
3 ^" r3 q+ d9 m) m% T9 D
{ name: 'Taobao' }% O% H$ X5 R4 k3 R, }( T
]7 z' M# M1 e' |
}* m d7 i7 D' ~ D/ j# @
})5 }6 D0 e1 ^, y G5 v" B7 P
</script>

复制代码

模板中使用 v-for：

v-for

<ul>
1 z3 H9 r @& \; Y) r- a/ u( |
<template v-for="site in sites">
+ I9 o6 o+ D1 D: b) u e3 W
<li>{{ site.name }}</li>
* z" Q6 M5 M2 \# Y
<li>--------------</li>
% T' W+ I, q' i, V
</template>
' a* B, i7 a* n% l& L( U
</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;"># r6 c+ X$ ~+ G2 q' S5 N7 Q. 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;">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;">
) O8 M5 k: b. H2 U* g: f& Z$ b
</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;"># v8 l. S9 {9 q* G" Q& Q8 x3 i) q
{{ value }}8 _' c* z% R6 `. K0 Z: l% 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;">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;">
9 u( _- v/ @2 t9 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;">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;">. P$ j" m1 t Q' C
</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;">
% E! X* N9 Z; Z# M
0 k- W* H. x& R; v6 ^2 r% n; {
</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;">
) {1 [ H3 H" U# I
new Vue({! j4 n& b+ {2 x1 @- W* s
el: '#app',
( m# [; v6 V2 Y. G l% n. i& Z* A
data: {' {; G$ y) g0 ]; s0 T' a! P! B9 r6 S
object: {
4 n6 e+ M S; w* N
name: '菜鸟教程',
$ m8 V4 ]) `7 G; ?
url: 'http://www.runoob.com',6 f! J4 n G0 E" N% s
slogan: '学的不仅是技术，更是梦想！'( p; e! \" R7 g+ n# F
}
& t l- i$ B/ l, b6 o' |
}- T8 k3 Z* y+ U" A0 u/ g( r
})
; N# L2 L9 U( `: W2 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;">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">
) p/ k2 i) F. u' U
<ul>1 M% z U+ Y( \& {7 _
<li v-for="(value, key) in object">
4 S7 M! y8 o& Q; d- Z
{{ key }} : {{ value }}; T. L5 J2 u5 T; |' T! ]
</li>
% `* V5 _/ n( F( L( B9 a1 U
</ul>
, h, Y) }' k2 S
</div>

复制代码

第三个参数为索引：

v-for

<div id="app">6 ~; ]# |( z) H% r S. N' I8 V
<ul>. a% T4 s" M7 C) ?
<li v-for="(value, key, index) in object">0 S- R* a7 K% j/ g& v v
{{ index }}. {{ key }} : {{ value }}
: C# R( S8 w/ t# e
</li>
( l! z4 C( G& x8 W9 O4 M% t
</ul>- {9 d0 t: j: j7 B# n
</div>

复制代码

v-for 迭代整数

v-for 也可以循环整数

v-for

<div id="app">8 z7 `/ h* z8 h2 S* M
<ul>2 l& l) @; }! x3 k, {& e( C
<li v-for="n in 10">
9 }# e4 U9 b5 P
{{ n }}
5 r, K! y! H+ A3 m: o. T: {
</li>2 e q: [$ p9 L. k! A
</ul>/ W( S) j. m( z' x. ?! M" v9 Z
</div>

复制代码

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

Powered by Discuz! X3.2