管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: v-for 指令/ l7 C0 R! E0 [
- <div id="app">! e0 c6 W" o! y1 U
- <ol>
~8 Y' R, V+ X - <li v-for="site in sites">9 Y3 O( h; {$ Z/ `8 m
- {{ site.name }}- ]' Y0 {0 J# _9 B1 \) Z: S4 G* C6 d
- </li>
+ u6 D$ f" W/ p - </ol>+ S- B% G Q4 E+ W l5 v
- </div>4 A5 N8 |+ ]! Z; P5 [# Y0 D2 I
- $ f Q! m. o9 B+ V3 I5 Y
- <script>" l7 |, p% t2 S, Z" A6 O2 K1 O
- new Vue({6 c' Q; Y& }$ R& D
- el: '#app',
3 y$ P# g j" e1 ` - data: {
6 A: o8 ~8 V, P2 \% D H - sites: [) A6 ~1 A& a8 A5 t
- { name: 'Runoob' },1 U6 s8 g0 |5 t* N# c
- { name: 'Google' },
3 H6 A1 R* n8 k - { name: 'Taobao' }2 m ~/ `" f) V7 X. h
- ]
* `! f3 f4 m; W0 L9 x5 B7 { - }& K& |2 R3 z: B
- })
; m- f$ ^5 z7 K& d$ {+ X - </script>
复制代码
+ P) u5 Z$ S$ Y
/ n, F3 M. Z% b( y A2 }7 y' _# w5 H模板中使用 v-for: v-for. Z# r/ C# u+ Q' ^; T. J9 E
- <ul>
7 x# x, b/ a3 o( u8 u6 x5 y* u+ I3 F - <template v-for="site in sites">
" ]' z3 c* G- L6 d - <li>{{ site.name }}</li>
9 \9 |1 j- q3 C5 z _* [ - <li>--------------</li>& t, a% s6 K. K. \
- </template>
) K; o1 z( R5 B% k2 D: P" k; @9 m - </ul>
复制代码 v-for 迭代对象v-for 可以通过一个对象的属性来迭代数据: v-for) {; y+ p3 T% _
- <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;">
# S* j" |% i0 ~5 d - </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;"> S2 ~ }; y \8 K+ n- Z& 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;">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;">
. M( W& H0 N4 x7 c5 h - {{ value }}: Q. M% C2 p; J; 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;">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;">
% k( ~5 z8 x) O - </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;"> t0 f6 b, g, 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;">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;">& j9 |( E" B" i( ]* n# b
- 6 b) m8 \3 R; e* \$ f! E: {7 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><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;">
+ k2 q8 d7 X! O( t1 w2 O - new Vue({
6 u# D. Y; t8 s5 x8 F9 d - el: '#app',
( D. Z+ R1 a2 v$ x2 j& k - data: {1 j2 N. |* x0 u; g$ d3 \5 i
- object: {
# ~, m) u+ g& b - name: '菜鸟教程',
5 e8 ~# H7 S4 }( M - url: 'http://www.runoob.com',. i5 y0 n$ b0 x8 ^% y7 ^- i" F
- slogan: '学的不仅是技术,更是梦想!'
4 B/ f2 U9 p' ?+ O. c( W - }! t( O1 ~6 n" X1 q3 n9 P. V' d
- }
5 @* \2 p* j1 p( X6 O/ O6 K5 T3 N - })
& d/ }9 N5 b5 p* C" 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& B3 i! K$ _ K2 y$ J5 p
& `0 E. }- ?7 ]. I% m# @6 G
- <div id="app">3 n3 r( B/ m* D: P" a. ]6 P
- <ul>
$ i4 b( x/ R3 _ e; k |/ | - <li v-for="(value, key) in object">
4 I# s% l' n( p - {{ key }} : {{ value }}9 u/ }% N2 U) G1 R% l6 b8 X, ~
- </li>3 z6 P" O" l" g- C' i
- </ul>" d6 y( Y7 N( E- ?4 a
- </div>
复制代码第三个参数为索引: v-for4 D3 L! L/ t. p3 C7 k
$ Z k. O; c; i! L- <div id="app">0 }$ P% E) P- G" V2 d" c
- <ul>+ q, E3 K0 J$ X6 J8 J Q
- <li v-for="(value, key, index) in object">6 H" o. t0 @# u6 Q- Z
- {{ index }}. {{ key }} : {{ value }}
7 [3 k0 h# |$ }2 u: j; n9 ]1 R: d - </li>/ U+ H r7 ]8 o$ W) ?9 i9 m
- </ul>7 [6 Q, x* X8 b
- </div>
复制代码 v-for 迭代整数v-for 也可以循环整数 v-for
- x$ ~) i; S* E0 v3 E+ z) [2 r3 U; F" Y2 o4 l
- <div id="app">
; n) F& f* k3 i) Y( a5 H - <ul>
' t# A: M7 @5 P4 `% l" ^# |$ q( b - <li v-for="n in 10">: b6 m* z* P6 @8 J M
- {{ n }}) t6 p: Y4 B5 ]
- </li>5 Q5 m+ F9 Z2 O3 |: r
- </ul>5 b5 T; X* w0 i2 H; O7 v
- </div>
复制代码
) n: y7 |: q D1 Y: O6 `; L ?/ [1 k6 q, i8 @! ?
) r3 s9 R0 U" c8 U0 {
- A7 U( r3 V4 N; D0 y6 v* [
|
|