管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令
9 H5 L/ s0 m& K# X. p% V- <div id="app">
# g8 J3 |! b8 d5 N# j - <ol>0 ]) _* i Y, O6 a$ A
- <li v-for="site in sites">
9 \6 Y+ Q% P* C9 X6 G, c( g* P - {{ site.name }}* w; ^ r$ ^% N5 n* ~, J
- </li>
! M: [4 o. J( R: Y3 l+ I0 R, w/ w - </ol>
& v8 d7 `% S' \+ m, X) X" t - </div>
7 X1 `% K8 j, A& R -
+ W) D2 Q) f3 n2 K' h - <script>
0 x2 y# g2 { `4 m: g9 `% H/ i. P7 w* M - new Vue({/ g. x. {3 h/ k; w% t2 F s
- el: '#app',: S4 O6 A3 U( d. L' Z
- data: {
0 `* |/ k/ A! }8 t h% Q; J - sites: [
* k+ a& Q2 H- `5 d9 e# v* d - { name: 'Runoob' },8 m2 Z; S3 O6 W
- { name: 'Google' }," e# ^0 ~ ]. p1 O. M- L) c; g
- { name: 'Taobao' }- i! ^' Z a* ]% s/ o! _
- ]
4 g' U& J0 b2 Q - }
- j% w a1 w) P2 ? - })) Y- J6 K- y* B. K, v
- </script>
7 `& @$ R1 Q& h5 w/ J模板中使用 v-for： v-for+ z: r A1 M% j) y. m+ b8 _
- <ul> E. n8 |- c( d$ |' I0 p
- <template v-for="site in sites">; }- ~, T9 e0 U; N8 c
- <li>{{ site.name }}</li>
! m' ]" L; a! h7 n. C - <li>--------------</li>
/ z$ R- H' E9 X- [6 v0 s - </template>
1 m4 W7 ~% t& N1 M8 ]5 o1 R - </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for' R: y { S" e0 R; E9 \# [/ ]
- <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;">- E7 \- s( ^& Q8 G$ 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;">+ O+ q4 h' L. ^6 g5 C+ Y
- </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& y! y( b" A6 I. H$ H! P) \
- {{ value }}7 u# D! b, w0 [! y8 F) y
- </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;">+ c' y# J/ Y# n& ]% F 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;">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;">% l; l1 ?# t% 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;">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;">
9 H# B0 v4 N. d -
* O7 P4 [0 @1 U" P- W - </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;">' V7 q3 w- x: |# f5 ~
- new Vue({, g! L' L1 f* \% | R( x( E' U
- el: '#app',
& h3 B; B7 z, k5 @- o( x% C7 U - data: {) y* w3 X0 v; a4 ?, {) t+ Y
- object: {, ]5 ~5 s5 G& z' z. n
- name: '菜鸟教程',
) F2 S+ S$ x* F9 w* G - url: 'http://www.runoob.com',
7 D9 C% M) \8 i - slogan: '学的不仅是技术，更是梦想！'
& @9 M% N) w1 |4 T, r - }* w3 _) _( k! S$ \- S- {
- }
: o& R2 R" A4 C! } - })
$ @& |. h( B' \; K- W# d$ J! _7 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;">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-for6 e* g) h2 y, |. R
1 T: T1 P6 {; k. C3 t, {
- <div id="app">
, |- l$ ^9 B$ k - <ul>, a1 D" c% u, m, I$ R5 _7 X' O
- <li v-for="(value, key) in object">- A H" h; h7 A: J) T7 K
- {{ key }} : {{ value }}, a% q# [6 F5 O$ V. w+ |
- </li>
, O' Z! y' s+ j! o0 d - </ul>
( i$ b4 n3 N/ O4 G- N P O - </div>
第三个参数为索引： v-for
" ~$ c. ^/ |( W% l+ ]) p$ a3 {6 o" P. M9 H; s
- <div id="app">
0 `$ d0 z& F! `% v* V8 ] - <ul>
+ t, V/ ?* x: s - <li v-for="(value, key, index) in object">
" S2 m1 z* a, b; G; F - {{ index }}. {{ key }} : {{ value }}
+ K1 j9 c' Q0 z" N4 W - </li>
! ^3 G1 \6 I5 b" w8 W; h( f3 U - </ul>
: Z, ^* p- q, h/ `0 Z8 [ - </div>
v-for 也可以循环整数 v-for
9 t% n* n% H1 k1 h/ m, D2 V# }# C- G* |8 W% p0 F" m
- <div id="app">
5 L8 B. k! b* C( ?$ A8 V - <ul>6 h: K% o, t/ p" }8 _% H9 U
- <li v-for="n in 10">! h5 E4 O3 v) Q2 V
- {{ n }}
! y) O% I: C% W. }& p4 C" F - </li>1 X4 ]$ _6 h* ^/ W
- </ul>
. k6 V% C# {; v, f# H - </div>
1 G2 b' M8 o( p0 @7 C; p* Q2 [6 L
6 B' d) h, P4 L' ^6 B# t7 B
$ g# X V m' U |
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
