管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: v-for 指令
; h% E, x( K( f* t3 z, A- <div id="app"> P/ @* Z$ P! m" @# d) k
- <ol>2 R% {; b/ X) ]' A
- <li v-for="site in sites">$ W3 I2 j5 ~ h( t" i+ a t" y
- {{ site.name }}8 y! l* i* [4 M6 |* r8 c
- </li># @/ }6 q" D& [# E
- </ol>
8 {2 {$ x W O7 R5 g& P0 u1 i - </div>) N( f9 Q1 d) R7 H
- 7 ]* z8 @7 p6 X% H- q
- <script>9 a" r/ S4 s& T
- new Vue({
+ u3 A# E* K. E - el: '#app',
! [6 \1 @& F& ] - data: {
( b/ e4 ^2 U% t8 C: l6 g - sites: [/ k& Q9 u! Q; f2 w
- { name: 'Runoob' },
/ S! G9 S7 u0 r) h# W - { name: 'Google' },. s5 S8 ]" Y% L# s4 |
- { name: 'Taobao' }
. a6 |7 g0 |4 Y: C - ]6 o( ~, B: W( b$ a% V. E8 E
- }* u+ Z5 Y; G5 q# V1 L8 Z. L
- })
! u; E6 k" Y) z& W! _8 k# s+ |% j - </script>
复制代码 1 b& D* e) O8 y: G3 S8 W
8 n2 J; j$ m3 Y; \% Z. G# o) d) p模板中使用 v-for: v-for8 h( K! u) Z; i' C b
- <ul>: [8 C J5 M5 A/ e. i
- <template v-for="site in sites">/ N9 ?! c# Z) k( @
- <li>{{ site.name }}</li># n: W' q& q/ l2 x
- <li>--------------</li>+ Y6 K \* R2 ~/ r
- </template>
- K O5 y) m9 B1 [1 C; ` - </ul>
复制代码 v-for 迭代对象v-for 可以通过一个对象的属性来迭代数据: v-for; Y5 o+ s; ^7 j2 V4 ]
- <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;">
+ u" c8 j, Y4 [# m* r+ 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;">
1 V. G1 N. B! i0 ?+ L( b* R. v Q - </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;">
- e1 M3 d) j% ~& J0 w* u3 v - {{ value }}
" o$ E% L2 a5 @ - </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;">
6 y( x6 ~# S7 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;">/ O, d' J6 f5 K: V/ 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;">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;">$ P ^+ s2 i: B }- \
- 9 \( z( G% v/ ]& j# y- k
- </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 d; t) z# N. r8 z) I* O
- new Vue({1 l2 }' h! e- f7 O6 l6 J
- el: '#app',
8 k' | F; S" A* y6 [: W; E - data: {
9 J* p1 @6 |- v3 z/ W - object: {
$ F3 L; e) m5 w6 P( J% w! i3 h8 | - name: '菜鸟教程',
& [7 n8 l6 L) G" x/ Z - url: 'http://www.runoob.com',% ?6 V( y& s, k8 A
- slogan: '学的不仅是技术,更是梦想!'
2 c g1 l; X* A6 n - }
1 w" @+ p) u: q6 N - }/ d# D: L2 _4 S
- })
: @% ~& s" N5 }# 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;">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
9 |! c$ F4 Q, |: p f- H. t' E: Z* A6 h; K" Y( X* t
- <div id="app">
- L; u5 F) v% a- o - <ul>
8 V% z1 s, ?. @7 O! J7 X- w - <li v-for="(value, key) in object">
~4 @& S8 j4 l- F& I$ M/ u2 g - {{ key }} : {{ value }}8 X1 m3 f. A" w2 O4 o
- </li>* A, Q. F( l( K
- </ul>- \, l5 i9 r( t7 X; a
- </div>
复制代码第三个参数为索引: v-for0 ?* L5 i T% l% h8 B
$ R2 k) R1 T4 `( U0 n! D' s- <div id="app">
9 t& ?9 W+ e, R- G' m - <ul>
* z& M) |; J% J1 {- H7 s - <li v-for="(value, key, index) in object">0 O! ~: M5 @/ R9 V% h, j" h
- {{ index }}. {{ key }} : {{ value }}
. m& H' S G' B* V& O - </li>
1 r3 q6 a! ]3 [* |: b# {6 E' P' e: o2 r - </ul>% L* j9 M/ K" E/ A; q1 l" q) a9 V
- </div>
复制代码 v-for 迭代整数v-for 也可以循环整数 v-for
0 E$ i5 c# Q& x9 l. u6 \
3 c: V+ V$ I, Y [$ d* X- <div id="app">7 a: l' w* z: Y2 Y7 ]) V6 e& ]& ]
- <ul>: y' `1 a' K8 G3 f1 E+ Y8 K. D
- <li v-for="n in 10">
1 @* J; p- I5 w! i0 i - {{ n }}0 N/ G% j0 b0 f/ e4 T
- </li>5 c" K: o1 M, U) {9 o
- </ul>
( s2 o2 ]2 o/ y( e8 n - </div>
复制代码
! o5 h" K" }9 Q8 P: Q: C& U9 {* K$ G
, K% k& O4 z, d7 C7 _/ D6 _& ?9 T- n/ h' R; \- E8 O6 p
|
|