cncml手绘网
标题: 循环语句 [打印本页]
作者: admin 时间: 2018-7-4 10:56
标题: 循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令
% a# [1 ^/ b2 f( {- <div id="app">
& L+ ? C" W5 Y$ ^ - <ol>
, p9 [ ~( D+ D - <li v-for="site in sites">: m6 Q" S( s; z
- {{ site.name }}7 ]3 c- e4 x1 v
- </li>' T) f, M" v$ d/ C, Y, [
- </ol>
( }, D- G8 l n" p( { - </div>
3 ^7 V. V$ P% k- l# t1 o -
8 S, `" B' o" @ - <script>
' J. Z$ ?; l. N0 q, e; K& @ - new Vue({
7 `' V) M- X! K0 \ o* G - el: '#app',9 g3 a) F* w+ Q, D ]
- data: {3 `6 O0 R" d. E- P- o
- sites: [: c$ P: K6 R1 J6 n8 B. s& C0 I- ]. T
- { name: 'Runoob' },
9 p# u! P$ h" R5 l, T* E+ C - { name: 'Google' },1 |. h- ?! ?. y& ]
- { name: 'Taobao' }
+ ^' ^2 d, q5 P" `3 r. Q - ]
7 F) p* D, f; c3 C2 Y1 ^2 r - }# S2 ?5 z1 t- T
- })! H; |8 _9 R% w5 \
- </script>
% V. [, a8 p k7 H3 Z
模板中使用 v-for：
v-for) K8 M/ [+ E$ B! \$ H
- <ul>0 e: i- D0 w9 G+ N. K
- <template v-for="site in sites">
2 S$ A. u+ U: U$ A( X3 A - <li>{{ site.name }}</li>8 N/ n6 L# C3 E) B( a% E
- <li>--------------</li>
& T$ ^5 y4 c% u; S/ F8 } - </template>4 ?9 K8 X3 ^- } |
- </ul>
v-for 可以通过一个对象的属性来迭代数据：
v-for. A; p# Y- j% U; K) w* f
- <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;">
. u/ j5 U+ f( o" L& @$ @) 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;">* n7 K+ @; _* B& D5 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;">
# Y! E, b$ l( Y( |( l - {{ value }}- d6 m; i! W3 V' k8 a+ X
- </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;">
0 ^$ @0 o4 ?0 \6 n7 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;">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;">5 o7 [4 Y- h" J3 G/ q
- </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;">
3 j* J9 C6 W! g. r: @3 d -
% H7 `% u; Y: A( g2 \4 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;">" x# U v" g$ N/ J
- new Vue({% E& }; l5 ^& f9 D2 {. B
- el: '#app'," `8 _% _. ~. x
- data: {
5 b5 ?0 k) C L' G. Y - object: {
( X4 {+ s! q% b! i$ G - name: '菜鸟教程',, @5 h! ?2 n0 }3 ?& {
- url: 'http://www.runoob.com',( _* a# ~& m6 G. D" _* `; v
- slogan: '学的不仅是技术，更是梦想！'
5 \# I8 l$ p" f - }; T2 _; J; ]7 u8 u
- }* a7 i+ p* [3 Y
- })
) M' b6 p6 r8 L1 T8 ]# 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;">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' @+ |- u2 B/ n6 @3 B" A
/ a; T6 X q4 u8 B/ U2 A
- <div id="app">. z2 y z; _0 N l0 t
- <ul>
3 Q$ @/ j' r( ^5 G8 O - <li v-for="(value, key) in object">8 ?; g- L0 {3 |& h3 h$ r
- {{ key }} : {{ value }}
9 h- p5 @7 I2 ` h - </li>
. _: I) @1 v$ v8 O, E7 p# i - </ul>
- U, O" A8 U! b X: y7 C4 c7 f - </div>
第三个参数为索引：
v-for3 T, l. y! L0 S# g2 M" v) |9 d, |
) ]3 a. {+ w+ c: i- <div id="app">
) K3 a' E) Z& c7 x* I: W - <ul>2 o( m! V2 y" E
- <li v-for="(value, key, index) in object">
7 ^. Z" _7 }8 u8 _* K2 V, M, I2 n - {{ index }}. {{ key }} : {{ value }}9 e! z* B. b- w/ Q0 P" ^0 F
- </li>( _/ }/ o1 g0 m2 M+ Q4 j7 Y2 ^9 b- Q& }
- </ul>
+ G2 P, {) s2 j+ K - </div>
v-for 也可以循环整数
v-for6 ~& O' E* g) _' Y; e. v+ R. c
8 F8 z1 K1 W6 g- V0 X
- <div id="app">
. V4 U0 r+ I4 A/ m5 X6 F6 v+ O - <ul>% @$ ?4 ^- N2 d* r q
- <li v-for="n in 10">
' q% ^" K: `2 g1 h - {{ n }}
! Q- n+ A2 J( r. Q$ O - </li>* ~/ S4 Q7 K+ C# i9 I6 y! |
- </ul>, w9 Q9 g) Q. P. ~
- </div>
- E- f4 x _6 j6 b
+ }2 Y& X/ x' h6 N. B! _
% Z" {, b8 P. M9 V; o, c, `8 e5 N1 I) J2 Y6 s' u
| 欢迎光临 cncml手绘网 (http://bbs.cncml.com/) |
Powered by Discuz! X3.2 |