管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: v-for 指令+ K3 W. A5 f: I5 f* z, E
- <div id="app">
( i2 ^& G$ U! Y9 _2 C - <ol>
7 C# M+ I O% Y$ {8 U8 D$ c - <li v-for="site in sites">8 e/ G8 k8 V# K- M
- {{ site.name }}
m3 [) O e; Q$ y$ D e - </li>
$ o8 k8 p1 Z, O! n: H - </ol>
7 G$ @& J) U3 H0 S; o& I3 P - </div>4 y) z5 d& t6 s
- , f4 `' B; A, s- C$ d' \+ f
- <script>9 r! e+ h+ m+ o+ ?5 G$ v
- new Vue({1 K( |9 U: h5 ^
- el: '#app',
( _) t! S4 O0 c2 ]7 [' h d5 S - data: {
3 Y5 G8 i& w6 M8 }$ k - sites: [
8 Z- Q5 {0 ?0 U5 W6 m5 e& k - { name: 'Runoob' },
3 o6 t0 l- w2 R" ^ - { name: 'Google' },
. h# w- s9 j% Z' ] - { name: 'Taobao' }2 I7 j! S7 J5 w9 N
- ]
; A: e: u8 C2 C) L7 ` - }
- {! d+ Y8 ]. F) ?" u - })
2 j9 S/ E7 H; h8 |( S4 d - </script>
复制代码 " H5 \1 U& |! `' J0 c
6 X: m* s9 Q! }4 D b/ ^
模板中使用 v-for: v-for7 y% k' u( V( W
- <ul>6 g9 L. Z* J o8 n( H; a
- <template v-for="site in sites">( q- [4 [1 E6 m, u# j7 W
- <li>{{ site.name }}</li>) W3 G) M4 d9 P3 T
- <li>--------------</li>1 G0 ?5 ~- s8 v# S/ N
- </template>* o s% _2 Q5 K% h
- </ul>
复制代码 v-for 迭代对象v-for 可以通过一个对象的属性来迭代数据: v-for( g+ _! r% g. y+ Y V
- <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;">
& e- }9 z* _6 y' r8 p* b3 Y1 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;">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;">
^8 d. Y' d$ B0 J& ]( R' P3 f% 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;">
! o0 U1 @% g2 s- U' T2 v6 x - {{ value }}- j7 S) L! `6 ~1 {: x, l 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;">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;">
9 t# O% D, ], z4 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;">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;">: g) w9 q9 \8 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;">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 |5 ]- h4 [' g7 ]7 e! I
-
9 ^6 N3 {3 a% a 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;">
. q5 T; n* p! W, G+ M( b - new Vue({
, i# z h# x5 b: ?3 Q' w- [ - el: '#app',
: Z! j S: r$ c& E4 j/ `9 R - data: {
4 C1 u9 u- B3 q2 W7 P; r6 R+ I - object: {# i. d: }% b3 U
- name: '菜鸟教程',
! ~5 T) b: N5 U! O. x - url: 'http://www.runoob.com',
; {& K0 e4 i1 M - slogan: '学的不仅是技术,更是梦想!', F( x0 @* Q9 [
- }4 g( b5 o! I7 l3 L6 Y' t' }
- }& `7 s% ? E' w+ o9 H0 j/ f
- })1 n9 J# r! ~' p3 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></div><div></div>
复制代码你也可以提供第二个的参数为键名: v-for
/ k9 O! b2 S3 b' m1 _# s0 |- `( N0 ~; N; i
- <div id="app">
W' i, b+ g9 H1 o5 d - <ul>
8 n7 K$ o( ^6 [! W% B( \ - <li v-for="(value, key) in object">
( G4 y. W8 E2 Z" u5 T0 ] - {{ key }} : {{ value }}2 ?0 a' d' H$ U/ `# u4 D
- </li>0 T5 f+ c0 Z: {+ \$ u# t% ^
- </ul>& U/ K$ Y& C% J9 V Z
- </div>
复制代码第三个参数为索引: v-for8 h8 ^/ I7 |. c9 {% @
) p5 r o. }) W! e/ G& [, M- <div id="app">
" u1 q6 o/ P, J5 a9 h - <ul>
j- P: z# o1 y& M3 m0 X - <li v-for="(value, key, index) in object">
* I& T! s( e1 O2 A. s - {{ index }}. {{ key }} : {{ value }}
; U" C {' u/ F- C# L/ ^ - </li>( i i" j% w; J2 `3 _& x0 R
- </ul>; F- P) G8 m$ \( N8 X
- </div>
复制代码 v-for 迭代整数v-for 也可以循环整数 v-for# w) \$ t3 x/ [/ b' O/ ] ]
3 e8 T& }( v% A2 V$ h( l3 X% Y- <div id="app">. V" w1 ]/ C ~- E
- <ul>& R" [$ S1 e* V9 b& V7 E
- <li v-for="n in 10">
3 J% O, |9 X2 _; e - {{ n }}) z* n% U8 a6 j, O! Y5 v4 A, o
- </li>; X- x7 j0 R0 G- | K( z
- </ul>
1 p3 S( N) c" n - </div>
复制代码
3 h6 R& R9 n5 J
9 z0 l* t0 G% s" @+ s: j6 D5 p3 r
& [6 j6 A4 a* V8 x, w
: i" F8 G" G# x5 q! u: U) S |
|