管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令
& w% N) j( E1 ^% c- <div id="app">
3 Y9 u1 @* t/ ~: j% Z* v1 d - <ol>, n! v$ S+ Z; g+ P' K- Q! r# q# Z
- <li v-for="site in sites">5 f2 u2 B2 R2 [' A3 _
- {{ site.name }}- v* o6 R8 p, j9 l! f
- </li>
" N0 R0 E1 L6 q7 z - </ol>
. a$ I( h6 T/ d5 R - </div>4 `. e7 g2 @& K$ N3 W9 y4 L
-
# Z3 ~* H# Z; d3 j3 t# A - <script>
& i: `8 u1 I& q* n - new Vue({
+ |3 E* k1 Q. ~/ w - el: '#app',
- y& n; y3 ]4 T - data: {
( B9 C& E8 k. x; \7 x- u4 H2 W - sites: [4 ]4 ?! @; t y+ C/ J9 ?6 R$ J
- { name: 'Runoob' },' }5 p* |; H% A
- { name: 'Google' }," E: w; n3 `* m1 y7 j& i0 D# x6 O
- { name: 'Taobao' }* Y" b, D$ |) w5 _! Z( i$ @1 v
- ]9 k2 o+ E% `9 Z7 e) y8 `, r
- }
& P* u0 g1 f2 h& i - })! U/ N( _% e8 c7 W, e
- </script>
4 N E/ J* Y0 T" j+ i$ Q7 ]+ R; W
( u7 E8 c7 A5 }6 `; u模板中使用 v-for： v-for
- M- m# }& G$ y- R& a( n/ z- <ul>
" [7 b; ~& V: ^7 W- q - <template v-for="site in sites"> k( y) S2 V) C) E% Q! l& ^
- <li>{{ site.name }}</li>$ A* Z$ b4 Z' K3 }: E7 G- k" M
- <li>--------------</li>1 `- B6 }3 x+ H! f& T
- </template>
5 g' x' U' d, ?2 K5 @) F5 t0 f - </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for
8 C1 u8 }' H7 R$ j- <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;">
+ p% z5 W" e. 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;">7 l# C* z+ e# V- C r' }2 l
- </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;">
, ?0 Q" Z* \ J! e: H2 c: s @ - {{ value }}
8 @% s B, h: 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;">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;">
7 M9 p& t$ ^9 _; 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;">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 K+ k( Z. ?! 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;">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;">) n* h O* V, u$ Q/ r5 a
- 4 n( Y: [. o! y& n' |' 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;">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;">
+ P, z3 H+ g$ ?' z( c% a - new Vue({( L2 R( v: ~ J# k" y w
- el: '#app',
3 L0 x5 S- ], {! y% t$ g6 _' g - data: {9 k' p" g! G( R* _) x, E& G
- object: {' Q# ~! h( j! l/ ?6 [
- name: '菜鸟教程',5 b7 k2 B, T% X+ d
- url: 'http://www.runoob.com',
, h6 {9 b% ^1 j5 A - slogan: '学的不仅是技术，更是梦想！'* W+ u$ H! h2 {; A
- }
$ x8 n) S+ Q) e& _1 L - }3 ]; U+ {5 f2 Z! s; }8 T
- })2 g9 Y% o& h, R
- </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
. h- L0 x) m! ^: j$ w
& L5 \. ~2 b7 v8 T9 o1 {3 O6 }- <div id="app">
6 v$ ` F( I, g$ C8 p! n - <ul>$ Q) R2 G2 C R0 p" b# w6 u% @
- <li v-for="(value, key) in object">
# K% ~- G5 b( z; |& r - {{ key }} : {{ value }}$ e. R2 j4 q8 h/ `! p
- </li>' h9 @0 Z0 H J- r W0 i
- </ul>
: p! F5 ~+ g; _- ^# |3 M$ f - </div>
第三个参数为索引： v-for' E8 [+ F8 p. `- `
7 e. \5 @8 X) ~. f7 m
- <div id="app">" [& k+ o, @# W, q- a
- <ul>
- G# }" Q! K/ V9 F/ t - <li v-for="(value, key, index) in object">7 S* G% m. U7 k1 y( [
- {{ index }}. {{ key }} : {{ value }}
1 W1 v$ {8 E$ k# b1 w4 n2 K$ ` - </li># G7 L7 }3 }; Y8 P0 I8 y* C& B
- </ul>
3 e; r$ d. O3 }# k - </div>
v-for 也可以循环整数 v-for4 {0 W$ J( f I. c( M) `7 H
3 h. \" ^) u( v: b( g: h9 B* I. _
- <div id="app">+ ^1 H/ G/ n% c( r9 J: ~
- <ul>; a! J" o; A' L- H
- <li v-for="n in 10">' y2 K1 q5 i1 D7 p
- {{ n }}
$ x* r1 J+ [8 L5 |( J% V3 s6 n: U# R - </li>
' k/ w" n# v" G( a' x - </ul>
, Q5 k) L4 n, j6 C: j - </div>
$ N) S' F+ A8 C/ ?6 A" H0 b+ Z# S( G# H: M
# Q1 g1 o* V+ c
|
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
