cncml手绘网

标题: 循环语句 [打印本页]
作者: admin    时间: 2018-7-4 10:56
标题: 循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
v-for 指令9 u* M+ A) X; ^" {
  1. <div id="app">8 x( {$ |; k3 t* ^* ?
  2.   <ol>
    9 x: ?( F" m6 m+ u( a' L+ _
  3.     <li v-for="site in sites">9 Z* e- h/ I  F' e
  4.       {{ site.name }}6 ~) l4 l6 z4 w/ g% @; |2 f0 H
  5.     </li>0 p( g( L5 t- J- `2 h$ W+ i9 P
  6.   </ol>
    , U: S  h8 r, G! B) |' M! ^4 u
  7. </div>5 C9 n( Y3 J& B" y+ a  Y( T9 d
  8. : c$ B2 P( \9 t" i( A
  9. <script>  s/ W; V& X) }6 T
  10. new Vue({
    6 t% Z: A+ y% g8 [; L3 }; A
  11.   el: '#app',  T. C! q! V6 u& w8 g
  12.   data: {9 n: }( H3 n$ M* |* O
  13.     sites: [
    - T8 V# @% A" _; a, ?
  14.       { name: 'Runoob' },6 j  @8 @0 R2 r* g
  15.       { name: 'Google' },; M  c# Q" F' C' z8 e4 ?" C
  16.       { name: 'Taobao' }
    , j. G" U9 u% E( V
  17.     ]
    - o6 {' F6 F2 ?: D/ E; e
  18.   }# V& E) A# G5 E
  19. })8 D0 l% \2 _9 v# V
  20. </script>
复制代码

" {4 H) l7 q! }5 |" h6 E5 }9 ^2 M# F1 j: d
模板中使用 v-for：
v-for
, o1 y" n1 B( C
  1. <ul>
    ' P) w4 Q+ `* T- ^% k
  2.   <template v-for="site in sites">- n. X" Z% f. ~, ~5 w* T
  3.     <li>{{ site.name }}</li>
    . z2 X3 n- u! W" a8 E
  4.     <li>--------------</li>& q. z2 n0 d( t3 p8 e1 H
  5.   </template>
    - w1 \& d. i8 `$ \- s+ [' u2 g$ ~
  6. </ul>
复制代码
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据：
v-for
/ J3 ^" R: f: P; L8 f
  1. <div><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">/ n1 l+ k- b9 |) {9 G
  2.   </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">
    7 n- l& t& D! }6 \, W+ Y$ {
  3.     </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">"</span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">
    9 E. A3 F5 a# Y2 S( Q$ Z
  4.     {{ value }}; H6 i# p6 t9 }' s/ F$ [
  5.     </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">
    " @6 l( j5 j. c$ |2 d: z
  6.   </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">: \8 g. B) h+ x( J
  7. </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">
    , S7 E; O5 O% v. j9 C( g; e( [

  8. " l) H! b7 N: v5 e8 K  _
  9. </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"><</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span><span class="hl-code" style="border: 0px; color: gray; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">
    2 o0 E4 \1 k* B
  10. new Vue({. ?1 u. E4 y6 b, j1 |( V7 a4 U' C
  11.   el: '#app',
    3 \2 }( I8 b1 `! C+ f" c
  12.   data: {' C& m* g) u# E" d5 {1 Q- k1 t" e
  13.     object: {8 j  C  i' I* T1 l! G3 f& G$ W5 j9 g+ w
  14.       name: '菜鸟教程',2 \* y+ R3 i3 x4 M" n1 Q% U
  15.       url: 'http://www.runoob.com',
    3 d2 T$ q/ }5 l0 `  P+ m- E
  16.       slogan: '学的不仅是技术，更是梦想！'2 u9 L6 J" ^, v3 s
  17.     }' O3 e/ @* c5 n, y+ q; ~% D4 ^$ Y' b
  18.   }' K% ^2 O6 V$ g4 F) F
  19. })2 I" y3 I+ I7 T; x* ^# z
  20. </span><span class="hl-brackets" style="border: 0px; color: olive; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;"></</span><span class="hl-reserved" style="border: 0px; color: green; font-family: Menlo, Monaco, Consolas, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, 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, &quot;Andale Mono&quot;, &quot;lucida console&quot;, &quot;Courier New&quot;, monospace; font-size: 13.2px; white-space: pre-wrap;">></span></div><div></div>
复制代码
你也可以提供第二个的参数为键名：
v-for
) P3 D1 z8 w8 r  _+ ~. n" T
& q7 I/ n' o. O7 ]- P
  1. <div id="app">
    , J/ E  @" A# M
  2.   <ul>- O' g; t0 V1 k
  3.     <li v-for="(value, key) in object">6 r% V' [" K! {7 S- }# g
  4.     {{ key }} : {{ value }}
    8 X' f+ K6 _& u
  5.     </li>
    6 i- r1 y& z; N2 g
  6.   </ul>
    # t2 B& _8 K* L& `1 I
  7. </div>
复制代码
第三个参数为索引：
v-for
" Q# Q3 b/ p" J% E
$ F5 M' u: a  @. j0 V1 j
  1. <div id="app">
    * y; Q# k3 x/ r& [  h
  2.   <ul>
      s/ J6 f6 x9 r& e/ ^  z
  3.     <li v-for="(value, key, index) in object">8 A& P% D! k& H4 Z
  4.      {{ index }}. {{ key }} : {{ value }}8 r, l3 D; G( D4 P% V2 f
  5.     </li>" M" n/ r. H/ D6 m- f4 ~$ {; ]
  6.   </ul>, F  P) G( X# ^1 o
  7. </div>
复制代码
v-for 迭代整数
v-for 也可以循环整数
v-for5 A! Z* R# Y) {& c; R) J( `, x2 d3 c
& A: M4 U. e) r2 E3 E( j
  1. <div id="app">( u4 n. u# R0 O4 _$ L! n
  2.   <ul>2 M$ ~1 F; i" Q$ d
  3.     <li v-for="n in 10">& W4 Z" R: J1 V( G' q5 D
  4.      {{ n }}+ c, P; s$ B% x* |/ G0 n3 b
  5.     </li>
    / g4 }- P4 M  i5 c, ^+ {, p
  6.   </ul>' n. h- @1 k8 P* y  v6 O$ M
  7. </div>
复制代码

6 R+ r7 H) C  o5 n; `- G/ i/ _1 j0 B5 r% J" p

" q1 f+ N$ ], P" }+ B  S7 T( u7 }. X3 u. i0 J6 i  N# |% a* m+ k




欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2