cncml手绘网
标题: 循环语句 [打印本页]
作者: admin 时间: 2018-7-4 10:56
标题: 循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令) h3 T% q) V0 `. \% Y! s. G
- <div id="app">
& d' @4 C6 E9 O- ] - <ol>
0 p. Z$ r0 S( I, \ - <li v-for="site in sites">8 V1 c2 N7 d# D: F, F8 P
- {{ site.name }}
; u3 Y% a. L6 q$ \1 ^ - </li>0 O6 p8 F, w' t; s
- </ol>
# @1 z0 Z' C: s" G/ F ~2 h! R - </div>
, u8 k1 r( y% T, N - + e2 F/ z2 { s* E
- <script>: w, d. Q$ Y. l( [9 }6 t" w6 a
- new Vue({
9 o* r+ M2 a+ V, e2 H8 f% E - el: '#app',: O* z4 M- G/ q) F, ?
- data: {7 e. [( n- U" K+ d
- sites: [$ \& ?6 U6 N9 V
- { name: 'Runoob' },
) Z8 d; N9 O, |; z) L - { name: 'Google' },
+ V, N- D# M) n/ v$ }& o - { name: 'Taobao' }
, \" f7 i( g$ ~( X( m6 J" a - ]
$ B2 `+ ]5 B1 n2 o2 [( ]6 r - }) G. {5 ?* y! `0 l! B! [+ J( y) S
- })1 n2 {5 F" c( a5 l4 Z
- </script>
6 _# }/ v! J2 A' d9 N4 G1 u) N6 k5 {6 U% t0 G
模板中使用 v-for：
v-for
" E: c& e: G: K5 `# v0 l- <ul>0 v% t) E, k9 i- k3 H
- <template v-for="site in sites">
% j& I5 p. p6 A: ?) E - <li>{{ site.name }}</li>$ T' b2 T7 B. p. j
- <li>--------------</li>3 j1 I. z1 \/ n5 f2 \
- </template>7 a& M4 F) d8 K
- </ul>
v-for 可以通过一个对象的属性来迭代数据：
v-for& g2 G9 e1 o/ \
- <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;">
/ B5 B% F2 \( B# p2 G+ 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;">
/ H# r( Y1 O9 Q+ 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;">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;"># B( r" a* |1 U0 S1 Q0 n4 [1 h8 C
- {{ value }}
5 v* S- `2 Y* p$ 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;">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;">. N* O" a. j7 E% m
- </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;">
9 [- L8 p. K) W5 ]7 s m - </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;">
* p" T% d% U; e/ T% g. q# F5 p7 |2 \ - * W% x# ?2 L9 h% j+ 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;">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;">/ l1 q1 Q. \5 l: E
- new Vue({
' n$ ]- P3 U- a - el: '#app'," B. r6 @! l1 X8 L# s% s) s5 Q. ^
- data: {
# V8 U( C- Q3 J - object: {
" P2 @+ I/ W- k: v) H/ I - name: '菜鸟教程'," V# c* M0 d- T( ?2 ]
- url: 'http://www.runoob.com',
# d# J- L6 Z9 U - slogan: '学的不仅是技术，更是梦想！'
; _0 y2 @5 T+ ]6 X6 l& v8 Q$ p - }
6 @$ X1 Y7 ?: D* _# w0 K8 P - }. Q) K! S3 J4 d4 t3 k# x# M
- }); D Q9 @* Z6 Q# C$ A6 p0 O
- </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
, Q/ W- U8 f6 J* Q
% Y' A5 z- Q: \1 r" Z; W% B- <div id="app">& H, f+ g/ p8 y$ r& N3 p! c3 w
- <ul> }: `% m& R! ^/ V0 |8 C2 v7 X% U
- <li v-for="(value, key) in object">8 i4 B- z6 D' m( T0 G( B- d8 W
- {{ key }} : {{ value }}
0 F' T9 R0 b; l3 v - </li>
6 j' M8 t: v1 }) c - </ul>
9 J# N! z# y g - </div>
第三个参数为索引：
v-for6 u8 M( y5 _* z3 x
; \" a, u) G0 ^; d1 D- O
- <div id="app">+ G) @4 U4 W; B X) T2 s" {+ g3 j7 \
- <ul>( _/ ^. r9 I) Y5 ^# F. ~/ k. R; V
- <li v-for="(value, key, index) in object">
' a# L: j! j7 G! F! D. X - {{ index }}. {{ key }} : {{ value }}3 C2 t. ^0 ~% b2 w2 g! |$ _
- </li>% V7 X( ~; U$ z6 Z& `
- </ul>
. a+ V7 M3 n6 t" }( V - </div>
v-for 也可以循环整数
v-for) [7 \. d) \' X5 ], l5 ]: _
6 ]6 |" d+ v' k* T6 w7 R3 F2 k
- <div id="app">9 I# ?+ l2 C0 G
- <ul>* ?$ C* E6 N$ E
- <li v-for="n in 10">
- ~" d! ?: y8 y5 H - {{ n }}
4 B* B% L# Z5 S% x$ i# D/ c0 t - </li>* m4 `$ W- c7 [$ P# s
- </ul>
! C- ^% ^3 y" h$ t; ? - </div>
" C H; V! D: ^6 L/ ]/ a6 Z8 g6 Z" k& e; M* ~# h+ ^! v' |6 o2 [
, I2 l' a. Y) N% o
$ @( n0 R+ P8 M7 ?% T9 ?
| 欢迎光临 cncml手绘网 (http://cncml.com/) |
Powered by Discuz! X3.2 |