管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令% L8 h, k% w4 Q! B, W6 w7 q
- <div id="app">8 J' p0 `" V3 `* i9 r0 n
- <ol>
) G6 c/ b5 b0 H0 \* r3 ~- c - <li v-for="site in sites">
7 f X( U9 z! d7 F; \. O' Q0 [3 i - {{ site.name }}
# G! r! Z+ |2 I$ k, S' z/ } - </li>, H& v* D+ F! T k" M4 c
- </ol>
' N' [8 A+ S2 o3 N2 o - </div>- s' N7 i: P: ?
- , J3 ]) P5 b% S$ Z3 j- H
- <script>0 Y) I+ d3 r/ o5 T: P9 P
- new Vue({. W' Y K& h: D+ [$ N
- el: '#app',
. G# G3 n7 }/ Y$ Y4 a$ A. q5 r: ] - data: {9 @2 h8 L. `2 r" Q* K7 A
- sites: [$ R' v# ] M I7 B& D0 ]0 |: i" a
- { name: 'Runoob' },1 z* D# K! E* L* R! @! K8 O
- { name: 'Google' },
4 j5 f1 `2 `, u' Q - { name: 'Taobao' }
l% B3 ?" t8 v: n! G2 h: Y - ]6 u ~% S9 Z3 P6 C, p! L; s8 T
- }
" v6 t$ E6 S+ z3 n1 S, { - })0 }6 p9 Q0 Y$ k& b7 T: J4 [
- </script>
5 ~$ |$ y6 D3 D: v; p9 M模板中使用 v-for： v-for
' I- L) H0 r9 t8 ?$ T! h0 c' X- <ul>
: Y/ p: T# Q* j - <template v-for="site in sites">$ h, |- F8 H4 d+ X) a% E$ Z6 ?
- <li>{{ site.name }}</li>% f2 g( r* U8 B% e- x: B U
- <li>--------------</li>
0 m- Y3 M' h, Y4 t! x7 O( ~% r e - </template>3 M0 S/ V# s5 c% i
- </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for
9 D% T: \# v1 k; y: \5 y( q9 e- <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;">
7 U6 u# }% r0 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;">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;">
' e9 n. K6 u! {1 z9 c7 g4 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-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;">& n: e0 F, x( Y* s3 b& d
- {{ value }}: ?# _" ?' U) p
- </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;">
2 D4 W% ^5 E2 Y5 c) 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;">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 |" g. a9 q% Q5 _' 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;">% U; [" m* ~* O7 C9 ^
- 4 U$ k) W$ Y- 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;">
& t9 c. g5 B% j1 ]) M. X - new Vue({6 v. z% s, z& w! I
- el: '#app',, R4 F% z5 G# x+ d; e
- data: {
3 \' y+ k2 [# j0 ]2 N - object: {
) _+ G8 E4 D4 v" F - name: '菜鸟教程',
; t2 Y' m6 g' o1 l$ z9 o% L - url: 'http://www.runoob.com',- b/ P. V: o: j. x; n. L+ L9 k
- slogan: '学的不仅是技术，更是梦想！'
" d" y6 Y9 x! {1 y7 Z0 B - } Y/ t2 y6 k, k$ n- C7 x, t
- }
7 Z5 V. u9 c ?; f% l$ t/ v - })7 U; B1 Z$ ]4 q! i0 C D# m9 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;">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
, q2 o( g, e% h# y" v5 O# ^4 i$ G$ ]% n8 ~. Q2 p# J6 W8 L ^8 n
- <div id="app">8 K3 I) |% d( d
- <ul>' k- N; x p- |, P5 }" Y. I* c. J
- <li v-for="(value, key) in object">
# j* V8 U. P" B3 |* Q+ g: F - {{ key }} : {{ value }}
6 L7 M6 N3 ?# M2 C* `1 v# A - </li>
( a( g$ N) G; K" X9 |/ v5 ~2 }) A - </ul>
) R# D, \* E& G- y1 H1 r7 j - </div>
第三个参数为索引： v-for
5 }) R1 t) g; r( ]) P, `1 I) D d+ t. \7 K! y0 i0 E! \
- <div id="app"> L0 X, Y& B+ v0 e9 E0 W
- <ul>
7 l6 w5 y% [" M8 T5 j: }6 m9 w7 f: z - <li v-for="(value, key, index) in object">) [2 U0 ^" e1 W7 J8 e+ W
- {{ index }}. {{ key }} : {{ value }}
6 b! W' j# D$ j) _8 |6 l - </li>
: u- ?+ S# ?2 V: L# e5 _ - </ul>) w k& R1 H* K8 j1 S+ \; j
- </div>
v-for 也可以循环整数 v-for- z: l/ \+ [% L& B* o+ W
; K# p0 w- Z- P. |1 P" G. S, Z) P
- <div id="app">
@' Y6 M! L8 A' t$ N3 J( o+ G - <ul>
% E" J; P0 B- x- ?( ]: l - <li v-for="n in 10">3 N8 N: H2 F0 D. V, s9 d& o
- {{ n }}
2 C, @" T/ W! ?) O0 b' h* o - </li>8 I; y8 ~8 N$ A
- </ul>
- L9 Q( k0 G. [ p; w% q9 J5 G% T - </div>
% o7 a' Z, I* F: s2 G9 C+ f1 [" W8 f' c; z6 U* H6 l
Q# i/ F' P5 }9 E/ r {( q1 t( g% @' e
|
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
