v-for 返回数组元素/ 返回对象的(键/值)

这篇文章写的是 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
    }
  }
})

渲染效果：