管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: v-for 指令* m. |" V! Q5 d9 c( n0 A! M% ~; b
- <div id="app">1 C3 f0 Z$ O% D, z2 c3 P) w
- <ol>( e: {, s: L% A' J! t" P/ U! p
- <li v-for="site in sites">
5 V8 m) H8 g& a5 M) {/ R E - {{ site.name }}( R0 Q4 b) ^" X5 m. }8 d
- </li>! B; j0 h3 g: u" T! G1 \
- </ol>
5 h6 v5 R& q/ K- \# R* d5 q - </div> H( C: b( I E2 r+ g: |$ A
- 9 @" n' ~3 k. |+ C- x4 _" b/ v
- <script>1 l& a$ @0 @4 u# j8 Y" j7 \
- new Vue({7 w8 r" C3 F; v- M" X8 o* P
- el: '#app',
- k2 X/ I2 E1 l- l- b - data: {
0 M- d+ B( C/ V+ O& `, I0 W - sites: [
4 q m A+ P$ D+ s% { - { name: 'Runoob' },
) Q! g: q6 U; ]- y2 q" {# M/ F4 |+ j - { name: 'Google' },
t0 g3 _. @0 X% N/ t5 E6 x% {9 q - { name: 'Taobao' }
% M4 K" h! r4 _! _" a& i6 V - ]
& N$ z+ J8 R6 a - }# L+ B3 d8 l( d/ E8 u, P7 v: N
- })
/ l" |& s( ^/ D- E; m8 `$ K - </script>
复制代码 $ h }) V4 V% s4 \) X0 h
; M8 ~' R. s( Q# B( L: b模板中使用 v-for: v-for+ I4 S: q; F9 G" c6 d8 A; z/ V
- <ul>
6 D% L& I" o; A5 h5 g( w - <template v-for="site in sites">) F1 f. t6 r1 B) ]" Z
- <li>{{ site.name }}</li>, o$ x! H' O( o) R! O+ j' v3 e
- <li>--------------</li>) C9 x0 K' s# _; T
- </template>9 z% X5 d8 r7 k+ @
- </ul>
复制代码 v-for 迭代对象v-for 可以通过一个对象的属性来迭代数据: v-for
6 r, u9 r( e9 u0 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;">
" h5 Z2 v" d4 Y5 \% l7 [# 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;">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;">
2 A7 H5 ~ }. j - </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;">
4 u# \( [; [( u8 W6 | - {{ value }}
2 L6 A: `; H) H6 R( ` N5 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;">
9 r m$ o z$ j+ E2 j% 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;">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; W" H. I+ h0 e! 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;">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;">: d. z* G5 q. o) O& \
- ) z9 P1 s$ u& y" z5 l* r1 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;">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;">
( q" z5 V+ X% b, T7 Z# u - new Vue({
3 n2 v% L/ g1 w+ ~ - el: '#app',7 ?3 y. g8 m, w
- data: {
2 y1 N+ G/ }+ g9 @5 [9 s& } - object: {5 C' C/ `2 ^0 d1 d$ `# p
- name: '菜鸟教程',8 x2 j. N" P9 S* e
- url: 'http://www.runoob.com',
. |4 T+ w0 r# ^ - slogan: '学的不仅是技术,更是梦想!'
) x, u0 j. U- ^9 @7 f2 { - }* E; x& l7 i) P( u
- }
% x; s, U, f- c4 u6 @9 I5 ]7 Q) Z! T - })# U+ K4 c4 h; 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;">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; y# r9 S! C; V6 O' [: V6 Y
^% N9 Y9 s+ S0 ~- e
- <div id="app">4 y* e4 o: l l" ^. v1 z6 v' J
- <ul>1 P" f1 c5 e7 c' p6 G
- <li v-for="(value, key) in object">
# y A" x+ U6 o9 R - {{ key }} : {{ value }}& I8 R* i, i& T) ], h. f
- </li>( C/ X0 J& o. Q) H1 K
- </ul>+ a% d. I, K2 `* r, J; C! i
- </div>
复制代码第三个参数为索引: v-for
# H" M: R0 G' N( [# K- a
. E& W2 y, I9 r; Z% _2 Q- <div id="app">
! _6 q4 J# n& u - <ul>
& I4 O/ W) j4 P: I# \# \2 y/ ?3 X( N1 ? - <li v-for="(value, key, index) in object">5 M( w6 d% k+ R h3 C
- {{ index }}. {{ key }} : {{ value }}
9 r' ?( ^. H: k# M5 v/ \ - </li>
- Y0 Q9 Y4 n; ~+ b - </ul>
1 [% l& D: h# K& X) K, f - </div>
复制代码 v-for 迭代整数v-for 也可以循环整数 v-for
/ S9 i) l% o b, G) j% d. Q1 x0 J5 B5 @% d- h3 }/ ~6 l
- <div id="app">
L$ ^3 Y+ w) Q - <ul>
+ P& O2 e N4 {' S/ k( A! I - <li v-for="n in 10">8 O) ]8 E9 N, e6 x& d/ L
- {{ n }}( `$ N, Z3 |2 {9 @
- </li> s9 r8 U2 r% W; }& a( j; U- r+ J
- </ul>; }* W& G" Y) U& q+ @% e
- </div>
复制代码 9 |0 @* l; N$ D* h* ?# W5 Y
& J# F* a% O G( A8 K6 x% P* Y
7 g; A" x: V* Z" t% l: h5 S
9 `, O# f* n$ V |
|