管理员
   
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: v-for 指令
7 j5 H3 s$ l- Z" Y9 E2 o) ^- <div id="app">+ u3 b# o V4 B8 W% \8 }
- <ol>
_. f5 B( ~) J; E$ o3 W8 O- i% ` - <li v-for="site in sites">9 X0 ?( [6 Z0 N# B7 n& L
- {{ site.name }}
+ G# H* v, s& o8 [. H - </li>! e0 G3 T/ y! G7 |
- </ol>. a& K0 p- U" w$ k R
- </div>
: _) _* u" y, ~* N3 W7 I - ( x8 K7 `, y2 `' ]- V
- <script>+ O7 W& s9 j5 J% C; M
- new Vue({
8 ]: r6 i3 z( G4 P4 g - el: '#app',
( z0 q3 D6 h# p0 H8 h8 d/ ] - data: {# q! q& Y1 q$ r+ g C% b" Q4 L
- sites: [
# V9 s; ?* |3 v4 A: W. P- I" L' T - { name: 'Runoob' },7 _5 V& D; A& }. W
- { name: 'Google' },# N2 i0 A& L+ h: V ?
- { name: 'Taobao' }# I$ ]2 j1 ]/ U3 f( ~2 o
- ]( c$ d- S( L2 H* E& c
- }
7 b7 _ b" K7 H8 S# B; K; ` - })
3 ^: q7 e* w7 S" `" ~! T - </script>
复制代码 " s6 O1 r% q W: ?! D
3 b. ?$ b" E9 G4 o6 s7 y. a模板中使用 v-for: v-for; z+ i% L- c# l4 y
- <ul># y' e3 r. p9 I! Z
- <template v-for="site in sites"># J! J/ T8 _) ^
- <li>{{ site.name }}</li>, d( k( f+ t5 ] m
- <li>--------------</li>' \: |; E" d! v3 U
- </template>. o; o* P3 e+ I4 M$ E X; ]. W
- </ul>
复制代码 v-for 迭代对象v-for 可以通过一个对象的属性来迭代数据: v-for9 y* [) ^# F8 Q0 J$ b5 W
- <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;">
- I+ J7 t a2 |5 e1 b0 @5 E - </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;">
7 Y. N0 ], A+ a) S - </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;">
& z6 L1 w" T! g2 s5 P. f - {{ value }}
: `4 {) w$ q8 x6 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;">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;">
: p$ V# ^1 W# m0 s8 O5 d1 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;">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;">7 T B @$ G! ~0 p# t, H
- </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 S: o! h5 h# W
- f1 ?6 }6 a6 J0 T: f) 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;">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;">* Y" p5 p7 B8 A; |. x
- new Vue({" [0 V" H" N# i
- el: '#app',, y1 c2 h: z! Q4 b* ^( K
- data: {0 V# ]+ N# E1 b0 }+ n0 j2 `& |
- object: {/ Q" S2 N2 I" a' @' f0 p
- name: '菜鸟教程',! n( I0 [" O2 Z& O0 h9 l8 j
- url: 'http://www.runoob.com',
# A1 U" J: y. S/ f0 } - slogan: '学的不仅是技术,更是梦想!'
2 _& \1 Q' z( \$ j* h - }
+ F6 J$ q4 U4 k" ]5 i2 l( n - }
! `9 o. f1 {7 w1 p7 Q: M1 V0 b Y - })+ |1 ^; ^8 l9 W; v( e
- </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
' s7 j: G1 h* W; a
. q' \1 H8 `! V- H) z- <div id="app">
0 x. r/ W6 s2 o# T" s; W a - <ul>" n; `, Z7 r. U/ _5 G$ u3 F
- <li v-for="(value, key) in object">
5 f" K; E! f1 @( Q7 Y6 s - {{ key }} : {{ value }}
. F5 h6 |0 U `0 {* z/ M( Y - </li>
$ V1 z$ V6 J6 M5 E$ S& M- {0 q4 e - </ul>
, s8 q3 p5 q3 g/ y- g9 n - </div>
复制代码第三个参数为索引: v-for
2 {) ^! b! _% p3 {' r/ r- m. }: Y2 J) H
- <div id="app">. G" |$ J, p" I# N% U
- <ul>
% q9 i) x% ]: P8 {0 B; [ - <li v-for="(value, key, index) in object">
- ]6 m4 V( x/ l; y b! t - {{ index }}. {{ key }} : {{ value }}
: A4 \. _+ g6 m1 k - </li>( x, b4 z/ q% T7 b2 D
- </ul>
3 n% |, K `& @+ K8 }* S - </div>
复制代码 v-for 迭代整数v-for 也可以循环整数 v-for
' l) G6 O% z7 o( I* w) j a* q2 y U- g0 n& Q0 m
- <div id="app">0 v6 K; c6 h2 F9 @
- <ul>
- ~6 N. S5 p6 z - <li v-for="n in 10">
0 j- t6 P# x6 J5 o' @( I! @. P - {{ n }}( r$ M% h5 @6 f2 r+ r, M' D4 \
- </li>
% g3 K1 k' W* t8 ~2 ?% M* Q# N, b - </ul>4 w8 N& r0 F3 C6 `2 v! S# H
- </div>
复制代码
. ^& L: r; P- I3 I1 K- Z( E
9 K0 G9 W0 R2 ? a$ Z6 R- S1 r7 A k" h+ r9 @
" x5 m; e: \* U- G. b0 X |
|