這篇文章寫的是 v-for 用於陣列和物件的用法。 

一、v-for 和陣列

1. v-for="item in items" 返回陣列元素

<div id="app">
<div v-for="item in items">{{item.firstName}}</div>
</div>


<script> 
var arr=new Vue({
el:"#app",
data:{
      items:[
	  {firstName:"zheng"},
	  {firstName:"wang"}
			]
           }
})
</script> 
 

var arr=new Vue({         el:"#app",         data:{             items:[             {firstName:"zheng"},               {firstName:"wang"}             ]            } })

固定語法：v-for="item in items"，items是源資料陣列並且 item 是陣列元素迭代的別名。

網頁效果：渲染的結果是 firstName 這個陣列的元素

2. v-for="(item, index) in items" 返回陣列元素和索引值

<div id="app">
<div v-for="(item,index) in items">{{index}}-{{item.firstName}}</div>
</div>

<script>
var arr=new Vue({
   el:"#app",
   data:{
      items:[
	 {firstName:"zheng"},
	 {firstName:"wang"}
	 ]
       }
})
</script>

 網頁效果：可通過 {{index}} 獲取當前元素索引值 

二、 v-for 和物件

1. 返回 值                   v-for="value in object"

2. 返回 鍵、值            v-for="(value, key) in object"

3.返回 鍵、值、索引   v-for="(value, key, index) in object"

<div id="div" >
<p v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</p>
</div>


<script>
var ling=new Vue({
  el:'#div',
  data: {
    object: {
      firstName: 'zheng',
      lastName: 'zeling',
      age: 26
    }
  }
})
</script>

<div id="div" > <p v-for="(value, key, index) in object">  {{ index }}. {{ key }}: {{ value }} </p> </div>

var ling=new Vue({   el:'#div',   data: {           object: {                   firstName: 'zheng',                   lastName: 'zeling',                   age: 26     }   } })

渲染效果：