管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令, P5 c! b. i5 x5 G$ c. t
- <div id="app">0 |$ K H/ j- ^; X. m( v3 \
- <ol>
' X# f- U5 v, l( f$ D! M - <li v-for="site in sites">8 A3 U/ T( [ h* S" ^( Q
- {{ site.name }} h; Z- j5 s$ _5 u# k* I2 X. K
- </li>
% r$ A2 Y9 Z3 @ s6 _ - </ol>
, b1 k2 l' _+ R - </div>) ^; w5 T; L5 j V
- " f( p' [9 U) n1 K4 u' L8 J
- <script>
4 q+ `3 u3 x) {) s0 p) I+ ? - new Vue({
# Y) M8 e; g8 k& j& s$ p, c }7 E - el: '#app',: k9 ~( N& W: Q. e
- data: {
3 N2 j; Q n( l) [2 Q - sites: [, h; `3 i8 q+ c& N4 N
- { name: 'Runoob' },
1 R+ ~; F. ]! ~& o: ^7 J - { name: 'Google' },
3 o }" ^, X: ~ - { name: 'Taobao' }9 Z5 C: Y8 |$ d
- ]
# g+ y( a: Q5 V- m" v0 Q8 v - }; q0 |! |+ ?) Y* [$ T! K5 R+ F8 v) F
- })
+ b, |. u; _5 m4 y `5 |/ o: Z v - </script>
: ^/ e, m* _* z6 M, w
. w/ J4 F% W ?& B7 U6 m模板中使用 v-for： v-for
& c1 g2 m' l& P" j5 N9 {5 B- <ul>
, o, J+ u/ f7 I9 C: n8 Q' q, z - <template v-for="site in sites">
8 N9 h; {4 i6 p2 I+ ? - <li>{{ site.name }}</li>. V0 a7 c3 d/ j- X4 c( c
- <li>--------------</li>
- @" X( s. p+ o/ {. G$ D - </template>9 M+ t, ^! l( i- w5 u
- </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for
8 f) T; ~7 h; G7 [8 p c8 c% c! K- <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;">
6 S n" j9 B+ \& g% 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;">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 [0 n1 O6 I: r$ X: 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;">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 l; x) N' E' g - {{ value }}- h& i/ r$ r7 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;">( a: Y$ h+ l! T2 I1 C1 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;">
+ u$ ]: d7 T7 v5 N 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;">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 A- _4 o B: c) D& f1 \8 { -
& n3 O7 t: o" l" p8 L# k5 H1 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;">
3 u+ n; Y( ?! y( I - new Vue({" w8 ]) T: C8 c; F0 N/ C
- el: '#app',6 B. Q6 F* w/ O+ _+ O0 `9 i& E: G
- data: {- a9 e/ \1 a1 }: O
- object: {. l3 V3 s1 f/ d& c( X
- name: '菜鸟教程',* [ E" O+ Y" J$ y' r! M' j5 \
- url: 'http://www.runoob.com',% e2 H" I: Y0 X: y* G
- slogan: '学的不仅是技术，更是梦想！'3 k. j7 n4 f1 n
- }
7 ~6 l2 k' g" U7 A k+ u - }6 {' r: }. l9 F" C Z/ q/ N8 N* J
- })
, H& I5 s; x9 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;">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' ^. s) P1 m8 H
2 b' f! t, v. A" u! A. H
- <div id="app">) z1 L) q8 L7 q0 f
- <ul>& D7 [! \( U g) R2 c4 n! o. @
- <li v-for="(value, key) in object">
i' ?: j3 \5 q [ - {{ key }} : {{ value }}
0 e: H5 R" z! `: |. f - </li>% {' t; s& `" g2 T) Z
- </ul>* b! a+ c" b9 u
- </div>
第三个参数为索引： v-for
; y+ I& }1 {* s- I% M v% o- E3 M0 p* ]4 K2 b0 R0 n
- <div id="app">( a- d/ A- a9 [( L5 ^0 y
- <ul>
+ f$ L8 `( a3 _, H7 l! h+ s - <li v-for="(value, key, index) in object">2 c" c* a; F+ b- a% T
- {{ index }}. {{ key }} : {{ value }}; ~3 K G6 v) T! L- b7 e
- </li> S9 U9 A+ M* W- a; E: X
- </ul>
- p) u6 A- [! V9 z - </div>
v-for 也可以循环整数 v-for9 D! r+ j$ Q# {
! Y) r' z# {1 e; I& `8 V
- <div id="app">6 {0 {5 |- x0 }1 B: G. Y
- <ul>
/ R2 ]+ I- L" @" I9 g - <li v-for="n in 10">* B2 K1 X0 M$ D0 H; A. @( {% G, ~: X
- {{ n }}+ ^0 F: D! V- x# |+ F3 u
- </li>; b) X2 I" v0 h6 M* o
- </ul>
$ i/ R/ N/ Y& i3 i - </div>
, U0 \! z9 ?2 z Y2 W0 B1 {, ^+ T9 B5 O+ z7 I% f# \1 c7 \" [- B2 ]
: ?5 V; w. I! H3 X7 _- c
* v+ G( Y) Q f* F& m |
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
