管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令
! _5 a/ y6 o3 e3 Z( `0 }* ^8 T D: O- <div id="app">" @5 F1 u7 P1 K2 n+ `* X, v
- <ol>9 `8 f4 }2 w7 e% ~0 e& p9 u5 A
- <li v-for="site in sites">
- {5 R" N1 x7 q$ i5 d; b - {{ site.name }}
* R. u. w3 Y& B6 x+ s; t - </li>
$ q3 d. R% q/ f% O# _/ V - </ol>
5 e( M: l( t$ ?* M. L0 f; M- D - </div>& o" `9 G6 z; a4 W( I+ k0 d! J
-
- a, x. u4 o" b& K4 |8 O - <script>4 p4 G! d+ P6 p8 D5 p; D
- new Vue({0 }+ x7 S. i# B( L e
- el: '#app',
$ y) f: l: G+ _% K$ J( R - data: {
" c" S) a" ?& U- j$ t. i2 z - sites: [, A( L1 |7 m" M8 j5 D5 ?
- { name: 'Runoob' },! f7 ?- V# x. f6 s6 b9 R( a
- { name: 'Google' },
. U6 i ~. J1 _ - { name: 'Taobao' }
: K, v* C5 l% S2 z2 a7 M - ]( P1 ~ i: |2 F# x$ x- [
- }
3 _5 @: {1 {+ A4 B( x I a' v - })& B; ], Y3 l Q
- </script>
" @6 S- U5 [2 d Q9 x
' T5 w, z% F, {8 |模板中使用 v-for： v-for
! j! D4 C l1 ?* X! p- <ul># o. v ?- T! ~0 L) F: r% P: B
- <template v-for="site in sites">% T- N5 I+ P# ]: ^
- <li>{{ site.name }}</li>6 h* \* A! s# p+ v" c1 i9 S8 F
- <li>--------------</li>
5 @5 i' i2 J: c/ Y, D8 m" E - </template>& p1 r; M' }& I) v7 T9 p
- </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for+ m7 W" x8 R: ~1 P% V
- <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;">
+ ]" [% j$ n$ 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;">- a0 _6 U% B% ?* n2 o2 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;">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;">
- Z- G0 i1 `4 `0 j& A) ~ - {{ value }}
7 ^' W( i& @$ u; k, |# n - </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;">
4 R0 \) M/ R1 k# M3 N: C - </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;">
% w2 c6 e6 h" D) W( a4 i, 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;">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;">
2 Z! A; |& t- l' g- q5 { -
4 l+ w! {+ z; q9 [* @ - </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;">
]/ `$ n! q. J7 N* t - new Vue({
0 {* D) L- {+ O - el: '#app',
! R8 q( w7 r! P3 M - data: {1 d. p7 X2 h H. P+ p
- object: {$ s$ Z9 ?* p: \# n* K6 Q' G
- name: '菜鸟教程',
3 ]' D. C7 q: ?% N - url: 'http://www.runoob.com',
! _% k- k9 O! b) Q) @ - slogan: '学的不仅是技术，更是梦想！'2 p& ^ h& Z" c
- }6 ]8 Z. m; P8 p+ y
- }
5 K# q" z4 p4 \+ E( e( E - }). [9 R% i2 b/ j: c5 Y5 ^) h" p, 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;">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-for1 t k# w: T" n, e' F
+ `% z+ L1 h. x5 r1 P- <div id="app">: k& T4 |5 ^4 k+ @; ? e
- <ul>
- t8 G: l0 v5 I! n$ i7 S6 g2 d$ | - <li v-for="(value, key) in object">$ n: _& |1 U- _8 F% ]' |+ {5 _, o6 [* L
- {{ key }} : {{ value }}
5 U6 l- X3 _' _ - </li>
5 k- m9 n% S4 K8 \0 G - </ul>
9 ]: r& u% o! k' ]$ }- G1 q - </div>
第三个参数为索引： v-for
4 X, A! r. Y3 H* g5 C! q
- H3 v% S3 Q9 m0 }4 j: o( z4 f# [; [- <div id="app">
1 ?* |$ e) @: W5 ?! S - <ul>
$ N" s" w* a) h: T; m - <li v-for="(value, key, index) in object">7 q: z% F# o y
- {{ index }}. {{ key }} : {{ value }}; p7 l# U2 F: n) a; G1 v' Z
- </li>8 L9 C- F) ]6 m7 {
- </ul>
1 z9 N* H5 ?8 |3 C$ N2 V1 e - </div>
v-for 也可以循环整数 v-for% X2 ~: @( e& X H! {
0 Y) R Q( @: V9 E: F1 r1 n- <div id="app"> K5 a, u, X5 H
- <ul>; b4 T! i5 E4 g2 T3 y6 R3 t+ t
- <li v-for="n in 10">
z) G( B; _) ^" c! @2 P - {{ n }}0 N. A; A2 J. j$ Z
- </li>
# Q& w, _" w* O: Y9 C* h3 @4 x - </ul>3 p9 @ g. E w
- </div>
8 M5 G& I' S8 c& L. {0 ^& M' Y
+ N% q: a d- d/ K) q3 [( v- p# K1 {' o- w/ [: x& L
! c8 N5 g& m" \5 Z; R+ b% ? I
|
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
