对于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>