v-for指令案例详解

对于v-for指令，以前老是不能理解，经常记混，所以特地写篇笔记来加强下记忆，希望借此能学的更深刻一点

v-for顾名思义就是个for循环，是vue的一个循环。在遍历json字符串的时候有奇佳的效果，感觉就是为他们而造的。

1、数组

如果给你个数组，里面放了值你怎么遍历出来呢。在java中一般用for循环，再用个i++把整个整个数组渲染出来，而vue则简化了这个操作，相当于将item变成一个变量，自动实行item++的操作，就是接口已经给你写好了，你只要把数组给我就行了。然后自动将数组里的值赋给item。

data(){
      return{
       arr:[
       8,9,10,11,12,13  
       ]
      }
    }
}

<p v-for="item in arr">{{item}}</p>

完整的写法是

<p v-for="(item,i) in arr">数组里的值是：{{item}} 数组序号：{{i}}  </p>

有数组的值和数组的序列号，且序列号是从0开始的。
值得注意的是，一般我们不加括号们也不使用序列号，item默认取的数组里的值，如果反过来是(i,item)，那么item会变成序列号。

既然数组是这样的，那么后面的数组对象就是在这基础之上完成了。

2、数组对象

这个用的最频繁，最常用

 objectArr:[
         {name:"zs",con:"你好啊,zs"},
         {name:"ls",con:"你好啊,ls"},
         {name:"ww",con:"你好啊,ww"},
         {name:"zl",con:"你好啊,zl"},
         {name:"lq",con:"你好啊,老铁"}
         
       ]

<p v-for="(item,i) in  objectArr">{{i}}++++++++++{{item.name}} </p>

3、对象

这里循环的是键值对，写出一个键值对，后面的重复渲染

obj:{
        name:"zs",
        age:"17",
        sex:"男",
        password:"123456"
      }

<p v-for="(value,key) in  obj">键：{{key}}，年龄：{{value}}</p>

4、数字

这个最简单的数字遍历循环，从1到cout依次输出

<p v-for="count in 8">{{count}}</p>