cncml手绘网
标题: 循环语句 [打印本页]
作者: admin 时间: 2018-7-4 10:56
标题: 循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令
7 C3 C3 Q' H8 @. z; H' g; k- <div id="app">0 g1 |: ?7 @7 p6 e, Q2 |& y) D
- <ol>9 P6 P( m+ ~8 x. Z) \/ e# U
- <li v-for="site in sites">: g: R2 b0 z1 u8 d
- {{ site.name }}# {" o( X5 [: K w
- </li>
2 S0 _2 K: D: q# L - </ol>
/ W0 A! S" q$ g0 y - </div>: E9 C0 @- s& J5 ?/ X- ^! ^
- 5 C6 U8 Y8 |' f% |6 O, u- G
- <script>
% I- a; q! g. L0 l. Y - new Vue({
3 P# ^( s! h9 T t9 a$ z - el: '#app',
" D, q& K7 q' V* r) C - data: {, [" d7 }+ \. I& M' u5 c5 g" Q
- sites: [" \: v" Q. a- O y) v( \1 P
- { name: 'Runoob' },
9 {8 m& \: ?( i3 K8 W - { name: 'Google' },6 P7 e S6 x3 a4 k/ h; X2 N
- { name: 'Taobao' }
8 o0 o( D6 t- Y2 y0 E+ R! p - ]+ P* b! m6 p3 y3 r: S2 D
- }
( n9 h# c- D% c& j - })0 D# c" S3 T! O7 e3 Y" c, a' C# j
- </script>
+ P2 ~- Y7 h6 W) _) B
模板中使用 v-for：
v-for9 \4 u& R6 j# h( [, K1 d
- <ul>
; q' ]% P5 U, |9 }+ B - <template v-for="site in sites">
. l9 |% ^/ l4 X - <li>{{ site.name }}</li>
! T4 Q) q1 j3 @' e' x5 z: r$ ` - <li>--------------</li>
3 o1 ~6 h0 y [1 V3 C( n: @+ l" U - </template>6 e$ s! `0 q9 ? F; r& f
- </ul>
v-for 可以通过一个对象的属性来迭代数据：
v-for8 K9 a3 V0 r- M5 ]7 H+ \
- <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;">
$ Z- x0 ] Z- ~1 I - </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;">
: D$ @" t# P. p1 o9 A) L- 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;">
% `7 G2 T* Y8 F - {{ value }}
% l M& ]! q% P2 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;">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;">
% R/ u4 V( T+ d6 W0 Z! S - </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;">
0 o& t, |4 d6 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;">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;">: c1 M9 B a" L2 I2 ]" j" z; g
- - A, _% I$ t& R. R$ K3 Z
- </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;">% e4 k% @7 j4 D5 r
- new Vue({
1 z0 r2 a6 }5 |* _9 y9 H c- k" f# L - el: '#app',
+ B4 S( L7 ?/ c6 ?% ?+ f3 N, o - data: {1 E. D# d; Z! @# w* ^( K' {
- object: {) j' Q, z* F1 g7 |
- name: '菜鸟教程',
' }2 `' c( L8 i9 v - url: 'http://www.runoob.com',: P V! U& X8 B+ Z) t- `2 U: I, _
- slogan: '学的不仅是技术，更是梦想！': e# d9 W! q$ {4 }5 \, _& k, m
- }
+ r! r! I' u& Q' S5 b6 l% M - }" U$ |( G8 x% q& Z, Q# ^
- })1 ~" @' p2 y1 k6 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;">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
* b- {( p) ^8 v4 W7 n T1 X/ b% e; x6 K% \) X: L- O6 @
- <div id="app"># I9 { s7 h, l, D- u4 |
- <ul>
7 W9 `1 U3 m1 U2 i5 b0 Q- h - <li v-for="(value, key) in object">
6 R! [/ H4 {- ^- Z9 O+ ^ - {{ key }} : {{ value }}$ Z8 s: i$ u2 _) S0 }& k. Z
- </li>
+ ?) L9 E4 _! s3 M4 c( K' u$ g% M, B - </ul>
' T$ }% g3 L0 g+ G6 G - </div>
第三个参数为索引：
v-for$ x* J t9 S( g4 z; \
3 k3 g/ V6 @) |4 F- s
- <div id="app">
6 r6 ^. o7 S2 Z# n* k" d1 \0 y - <ul>
5 Z' G k2 ?9 T+ t, U9 q ? - <li v-for="(value, key, index) in object">/ Z9 s" `& V2 L
- {{ index }}. {{ key }} : {{ value }}
0 ]* @; J4 g# N0 N - </li>0 g' ]7 r7 U/ ]& f- V$ h; E: ?9 w1 q3 @9 a
- </ul>3 D: m; G. R; K! w' c- j
- </div>
v-for 也可以循环整数
v-for
( r; x7 W4 y: v& E# m& j; Z$ o) k) y" C+ K
- <div id="app">$ T# p# U0 y7 ^6 W8 z6 q. `( A3 o
- <ul>4 v' e) @$ g. t9 }3 {1 n: h9 Q
- <li v-for="n in 10">
- e" b% V; E5 P q - {{ n }}0 C' }/ Q, L( Q4 P
- </li>) O1 _( h9 n5 X# I+ V4 f# J6 q3 u
- </ul>
9 v0 e* n; u3 H3 |7 r - </div>
. X# { V K! H: @" p. p
+ H0 O! G7 N$ ~+ Q2 G( K+ A# T' U5 w% B
| 欢迎光临 cncml手绘网 (http://www.cncml.com/) |
Powered by Discuz! X3.2 |