管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令
& }$ {" N+ p2 Y3 }" w+ W+ P- <div id="app">
' C* S! O7 X; t& c! z' k - <ol>0 j$ E" Q( }: M: y0 `& J8 G; Z
- <li v-for="site in sites">% H# E, y, }, ]- ]6 f9 X
- {{ site.name }}
1 K+ D( B/ j6 y - </li>
3 p. R5 g$ b. H6 c - </ol>9 ^7 _, M% b2 _4 F! O+ L8 r
- </div>( y! g$ F: G4 X* {3 C6 J* z
- ) j/ n( K6 |( m1 L7 `' y
- <script> F# j( e# i. c D! a" w. n9 d
- new Vue({ t6 O/ i% D" t7 a9 q5 y3 }; E
- el: '#app',
k+ V# Y4 b2 D. o$ o - data: {
. Y7 i, N+ ]/ a& Y! O, g$ q9 q3 L - sites: [8 c- S- G0 D; g( u) `
- { name: 'Runoob' },
3 [6 E5 |. ?0 m3 f7 r - { name: 'Google' },
$ }, p$ w2 e8 J* c0 { - { name: 'Taobao' }
5 y5 i+ d5 Y* W$ y/ E) P - ]2 F& Y% \9 V- e
- }7 l; B) b+ G8 k$ |5 d
- })
8 L; J1 H" U) m% f7 E$ f! ~ - </script>
3 _5 ?& [0 [$ \( ~6 @) M模板中使用 v-for： v-for) `: T* \ ~6 V/ L- O. x$ w
- <ul>
- f# c8 ?# L# G: ^" o3 C- z - <template v-for="site in sites">- Y9 b1 D. C+ }. g& w- }( z
- <li>{{ site.name }}</li>
- V$ T% i# Y0 F6 p - <li>--------------</li>7 l) t. x) w1 l+ n9 R! z
- </template>
. |- X9 t) N0 d- Q - </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for
4 w$ ~7 V9 r2 t; _5 ^9 @- <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;">3 {1 k. c5 C- A3 D) M
- </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;">
; h# @" ]" }4 v7 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;">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;">* \/ K( n6 C: ]; a$ i U2 ^9 d
- {{ value }}5 B+ m) Z; o: G: 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;">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;">
4 n( ]. {/ f H0 T0 I$ 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;">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;">
, V6 o. u, i$ v - </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;">8 p' Q; q. y2 m6 d9 l
- ' h3 m% W/ ~4 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;">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;">: O/ T# F: @" s+ z g
- new Vue({) h1 w9 K9 u/ ]' h! q
- el: '#app',
4 ^: e, d* f0 y# c - data: {
# C, v& {- P4 d* }4 b/ L/ F - object: {
! V5 [2 \. h! H# E5 g - name: '菜鸟教程',, w0 K+ D8 t1 D+ J. e3 J; {( B a
- url: 'http://www.runoob.com',
7 @# o) u2 |+ b4 w( P9 {# h: L! F2 Y* I+ J - slogan: '学的不仅是技术，更是梦想！'+ v f! z* S& `7 M3 N8 F
- }) l6 T2 A4 ~1 k6 l4 o
- }
* K/ x4 I0 h2 U5 ~) j9 { B# H - })% R( k( V+ {) W/ ]0 _8 z' K6 R
- </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-for0 L' ^3 K j7 r X9 E- G& N4 U+ F! T
. _- q( P- u% i. u& r/ W
- <div id="app">
0 {/ z6 v. o, i2 m# i" z - <ul>
R( m. x, v- Y- V) `: x1 y4 U - <li v-for="(value, key) in object">8 y6 c+ [, s w' J$ |, y% T
- {{ key }} : {{ value }}
Z9 e8 W' i" ]5 x1 ^- \# E+ Z) G - </li>! c- X+ _7 M! C3 J4 [& q) F1 M h
- </ul>0 x2 {" d# w. B. u& X. `; T
- </div>
第三个参数为索引： v-for
( y8 s9 q& |( e6 H: R4 L+ h" M: x& ]* I8 g+ b9 G+ J& {
- <div id="app">
8 k; d4 ~1 |& W" O - <ul>
9 j; @" f- _, q% m$ s; Z - <li v-for="(value, key, index) in object">
0 ~# `5 Y9 }! w+ | - {{ index }}. {{ key }} : {{ value }}
; m4 _1 |& R x" d4 Q( r/ t - </li>4 j: x# c. c; C g; B0 X' \# T
- </ul>
: j8 e+ n; ~" {9 E% \# A3 ] - </div>
v-for 也可以循环整数 v-for& G/ W6 ~2 R# e( T7 b7 F
/ a8 I7 p. K% g' _ `& f/ p4 U
- <div id="app">6 |; l W6 q; Q3 {- f" G1 o
- <ul>: v& n/ o! E7 P& ?1 x3 v5 F) \
- <li v-for="n in 10">
" E/ t7 x/ A; K6 z6 u) O. F - {{ n }}/ }# i* m5 H& T/ f+ v9 a! j1 ]- a. P' o
- </li>
# y3 p6 u5 \ L4 ~0 _8 |, ]3 | - </ul>
& @ T/ y6 i' J, u$ n - </div>
% |! u. c, a7 R9 T* W; ^ E z! ~* }* f. |( B# f' K2 J
% l; Z( _$ T* ], y5 G3 T
, V# t) S: s+ O( |! x5 M |
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
