管理员
论坛积分
分
威望 点
贡献值 个
金币 枚
|
循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表: v-for 指令3 ]. Q$ m; ^* `' w0 o9 q2 o
- <div id="app">
8 X" F: }' s; r* N; g: ^1 N S - <ol>/ I4 ?9 H6 R0 ?, L# b# E; j
- <li v-for="site in sites">" K R$ y1 Z l$ P, ?9 q, Z
- {{ site.name }}3 @% E1 E9 o4 S- u
- </li>
+ H8 K; J: U; ~$ q. D2 Q - </ol>
; ~5 j. B0 R8 ], | - </div>
+ x* t7 k7 v9 X, R. ^" [$ k3 Q, B* {% |& P - 6 ]& H, ~0 a5 C
- <script>
& Z# |; u0 Z1 I8 i* ?" x - new Vue({
# ?, c& V! N4 i9 _3 R0 g: ^3 l! M" S - el: '#app',
8 q. x3 \; g' t! S" u$ o - data: {, `4 `' K" _* h$ |
- sites: [/ g' l* Q o, k# }) J
- { name: 'Runoob' },
) f% m( ~+ z/ w. b# p - { name: 'Google' },
( E: Y# n, C2 ~3 U+ {! }0 [* g# q! h. Y - { name: 'Taobao' }
+ D# J% f; K3 G - ]
7 n4 B) K% S1 K7 S - }
; U) |0 i# k( s$ j1 c# S% [ - })
8 W( F; ?; b1 V5 } - </script>
复制代码
% K0 U- X( e0 L2 d: @& ?9 L. o9 a C5 c1 K& L0 i! O
模板中使用 v-for: v-for
& z9 X6 p8 t7 {6 f3 g8 f& d- <ul>
! P0 X! |% x0 s& \9 c; m( {% d; B* s - <template v-for="site in sites">3 ?7 {- {; K' w0 D8 _
- <li>{{ site.name }}</li>1 A: U4 z5 i" g% g! E. L
- <li>--------------</li>% T. J8 A2 O0 _% e4 w$ o" v, J
- </template>7 J# |: j9 \$ S5 ]9 m
- </ul>
复制代码 v-for 迭代对象v-for 可以通过一个对象的属性来迭代数据: v-for
2 S' z/ J" w+ m- <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;">- y1 z( Q4 {$ U8 f$ ?; 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;">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;">8 |6 H) R+ X% Y1 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-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;">" [& c4 h8 H( c, W% s @8 f' d+ v! c
- {{ value }} t! k1 M# X a; I0 [/ 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-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;">
' e; r. T9 W" i# `# 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;">4 t: y. f6 c- @& W3 Q9 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;">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;">
# B( c1 M6 \" a- C4 |, } -
" |" ^) m- i! G& A8 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><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;">
! U2 C* e" p9 F7 Y& u% W, g - new Vue({
5 T/ H" d- I( b, R2 U! |5 v - el: '#app',8 W, q- }- M5 I# S
- data: {# Z1 c9 o+ V/ e+ J2 r
- object: {
0 {( U& [$ E' _5 R( ~$ J - name: '菜鸟教程',
! F" Q2 F5 b, j# ] - url: 'http://www.runoob.com',1 V/ C: Z) @( P4 Z
- slogan: '学的不仅是技术,更是梦想!'! V! Q5 [" r/ f
- }4 g& @) `" F# w, ^. J! }, q
- }' K; j- ~/ m r+ p& a! `
- })
. w. c: A2 a. ^1 Q+ Y d$ 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;">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( }. T2 b& C! Y2 O) g* V
; U! q; h4 f: J% a- l. U; l
- <div id="app">
4 x( N5 B X& f/ c, u9 J - <ul>2 M" A' s1 |# S9 V9 ? v% [
- <li v-for="(value, key) in object">+ [* `2 m$ Z4 B& }3 T- C
- {{ key }} : {{ value }}
( \& Z% W# s$ ? - </li>8 T8 f& ~. o+ \- `2 D5 b3 d6 P
- </ul>% C' T' O/ G) l+ K( S& [+ Q
- </div>
复制代码第三个参数为索引: v-for# m2 U* A. t4 F2 Z* }' J
. v6 {, U6 L. ^& L7 N
- <div id="app">
7 i, [ U4 ]6 |. i - <ul>. b6 I" U2 W. R5 q; K& c) c
- <li v-for="(value, key, index) in object">
2 x5 K3 r" e& n# t4 d - {{ index }}. {{ key }} : {{ value }}
/ z% e) @% i7 w8 z - </li>
$ v3 t S5 [2 n+ f - </ul>: m G( m' Q' z, r# N* z
- </div>
复制代码 v-for 迭代整数v-for 也可以循环整数 v-for
! Q% A: y! g9 v: F( R4 {, ~! e: [4 V
- <div id="app">
3 ^, h4 t5 F3 U$ e* Q - <ul>1 |0 u; X/ n- L) k* m& d) Z
- <li v-for="n in 10">
, K+ o3 U; d' e. I0 A2 F - {{ n }}$ x. F$ u8 ~% [
- </li>
8 y+ `1 w4 j$ _3 L, [: Y% f0 I - </ul>7 a! p4 h3 T& t8 s
- </div>
复制代码
- @( P7 Z2 P2 U, f) J+ a# q3 v, q! i. }4 E5 S1 N4 [
1 }+ ]2 _+ X% R. P8 `$ v
# p* b8 ?9 h" X+ V2 a |
|