管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令& r3 |! d& h0 l; a- ?& F. ~) }0 Q
- <div id="app">
* V }$ _) t' i) j - <ol>
# F* {3 s: x# k: n$ k, K0 ` - <li v-for="site in sites">
$ p$ z% {. `! V# u/ U* m - {{ site.name }}
& N A7 M r- V - </li>
3 G8 D7 S# N( m9 G% u& V$ v$ k - </ol>; m+ W& P$ P I! l' J
- </div>* s' H N3 ]6 Y! k" F! g
- - M: t; L- K/ S- V
- <script>& ]8 p& B4 E4 o
- new Vue({+ A) Q, _! {8 i1 ^: P- a. V
- el: '#app',! d. ]' N" a, j" l4 H1 R
- data: {
+ _4 N- J* R( C - sites: [
4 O6 y3 z/ A8 y4 _+ J: W - { name: 'Runoob' },' O3 h: |' l8 t5 d! T, A$ i7 V
- { name: 'Google' },
7 B; o) o. i( f- p1 @7 a - { name: 'Taobao' }
4 e9 N! u" ~7 w5 w( ]! { P7 a - ]$ T c0 X( @9 x: D) f9 o1 {3 Y, D3 K
- }% t' }% R$ Y9 H& x' z. B E+ w) O1 F
- })
* @% b' }- X2 p4 A* S - </script>
V+ ]5 H# i5 I$ ]. [$ f
模板中使用 v-for： v-for) f9 z+ O. { g! e
- <ul>
7 w$ t4 Q7 T( o - <template v-for="site in sites">* g: M3 H, f; z# g1 ?0 f$ p- R
- <li>{{ site.name }}</li>
, R. L% Y( ~/ J - <li>--------------</li>
2 p0 d* C/ y9 y( u1 t5 } - </template>) G1 h5 }2 n: x0 { h& }, [$ a4 [( [% |
- </ul>
v-for 可以通过一个对象的属性来迭代数据： v-for, y( f& t. t$ 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;">7 `. v! \3 H9 C3 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;">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;">. h& F1 ?4 ~0 n1 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;">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 z8 U3 v* g. K% M0 R( U1 m
- {{ value }}/ r+ K9 X& `6 _; D% 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;">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;">8 p+ U7 | L: _) B. k9 K
- </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;"> X3 N+ A! O1 D! a/ ^& S6 y" 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;">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;">
# F9 o, U9 b9 ]+ _6 n7 a8 D - 2 e/ A$ {5 N% k/ _
- </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;">
" C. l k$ z6 f4 r+ Z% [1 N. ] - new Vue({
* Q) s% I; h/ Q( b - el: '#app',0 P1 m( o$ T- v
- data: {- d# J7 G6 Y8 o+ D. V9 o
- object: {4 `$ w7 S* @+ d/ q
- name: '菜鸟教程',
3 Y& B, U8 Q* U/ P+ Y. X - url: 'http://www.runoob.com',& i2 R, ~0 ^& e4 F0 O( X
- slogan: '学的不仅是技术，更是梦想！'- x, U6 F0 o: C& q: I" s
- }
/ V& z/ b/ t1 n4 q5 q - }
; y/ V X9 z5 A - })
8 [+ `% 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;">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
, e7 ~9 T7 {2 Y0 G$ @. c: H6 X+ H. N6 P$ x7 ^& t4 o
- <div id="app"> v4 N6 Q) z6 O; ~# A" A
- <ul>
1 \- B: p* I& F- j. F$ G, I - <li v-for="(value, key) in object">+ F: e1 [4 B0 ^+ D' A
- {{ key }} : {{ value }}) [# o* R- t c; m5 K
- </li>
8 X, a% u/ z) W/ D( N/ B; b5 V" o! N: F - </ul>
9 v$ I2 v4 U; X( X. @2 v - </div>
第三个参数为索引： v-for
; `7 n/ H; S6 n4 `! B' F$ ^# J8 s! {2 r4 s
- <div id="app">% |# x. X5 z: K; H
- <ul>$ q! ?8 X& p4 c( k. I1 `3 ?
- <li v-for="(value, key, index) in object">+ |7 G) P3 F3 @$ V0 U' ?! v
- {{ index }}. {{ key }} : {{ value }}9 `% v1 x- _9 F6 |+ M
- </li>
O- K# i: G- l6 B& e- v6 G- X - </ul>
" F( ^) s9 _% J* e4 e- t1 w4 k - </div>
v-for 也可以循环整数 v-for/ d& ^2 n4 O/ S3 Y: K1 Q
! F3 m3 Z7 U% e5 w j" r; \
- <div id="app">
$ g2 X o9 q4 D7 o# d! @0 g - <ul>* {7 m9 H4 O" Y7 P
- <li v-for="n in 10">! w' f4 p7 ^5 I( q+ \! t1 i
- {{ n }}" T' m8 l* }" _# ~" o4 f9 z9 K4 i
- </li>
a7 P6 Y% {5 l8 ~ - </ul>4 h* m3 |& h+ F$ y& e+ ~0 L: u3 F" b
- </div>
/ D2 D7 T- o+ K' {9 k% I! G- B# B) E' s
3 }, Z8 J7 V( K, P* P3 ]
7 x. J% r5 |- G9 f' Y& Y; }* [$ o# b( Q/ S |
|
发表于 2018-7-4 10:56:27
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
支持
反对
置顶卡
变色卡
千斤顶
