v-for标签可以用来遍历数组，将数组的每一个值绑定到相应的视图元素中去，此外，v-for还可以遍历对象的属性，并且可以和template模板元素一起使用。
一、迭代数组
html:
<ul>
<li v-for="li in list" :title="li.title">{{li.name}}</li>
</ul>
js:
el:'...'
data:{
list:[{name:"China",title:'中国'},{name:"Japan",title:'中国的一部分'},{name:"Korea",title:"韩国"}]
}
这里的list一个对象构成的数组，通过v-for将数组每一项映射到<li>标签中去。li是一个变量，代表list中的每一项，最终结果如下：
China
Japan
Korea
v-for 命令还可以接受index作为可选的第二参数，当有两个参数时，参数之间用逗号分隔，并包含在一组括号里面。像这样
<ul>
<li v-for="(li，i) in list" :title="li.title">{{li.name}}--{{i}}</li>
</ul>
China--0
Japan--1
Korea--2
二，迭代对象属性
v-for命令还可以迭代一个对象的属性。默认是迭代属性的值。不像迭代数组，它可以接受两个可选的参数，迭代属性的key和index。
html:
<ul>
<li v-for="(li,key,index) in obj">{{key}}--{{li}}--{{index}}</li>
</ul>
js:
obj:{
name:'gg',age:'23',job:'none',dream:'code'
}
效果：
name--gg--0
age--23--1
job--none--2
dream--code--3
三、 v-for和range（整数列）
比如我要100个妹子,可以这样写：
<li v-for='i in 100'>妹子{{i}}</li>
这样就得到100个妹子，而且号码是从1开始的。
四、把张老师网站上的妹子挪过来
他网站里的妹子图片都在一个文件夹里而且名字很有规律，很适合用v-for命令。
html:
<template v-for="mm in mms">
<span>{{mm.name}}</span>
<image :src="mm.location"></image><br/>
</template>
这里的template元素用来将几个重复出现的元素打包起来。
js:
el:'v-for',
data:{mms:[{name:'mm1',location:'//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaW1hZ2Uuemhhbmd4aW54dS5jb20vaW1hZ2Uvc3R1ZHkvcy9zMTI4L21tMS5qcGc=.jpg'},
{name:'mm2',location:'//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaW1hZ2Uuemhhbmd4aW54dS5jb20vaW1hZ2Uvc3R1ZHkvcy9zMTI4L21tMi5qcGc=.jpg'},
{name:'mm3',location:'//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaW1hZ2Uuemhhbmd4aW54dS5jb20vaW1hZ2Uvc3R1ZHkvcy9zMTI4L21tMy5qcGc=.jpg'},
{name:'mm4',location:'//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaW1hZ2Uuemhhbmd4aW54dS5jb20vaW1hZ2Uvc3R1ZHkvcy9zMTI4L21tNC5qcGc=.jpg'}
]
}
上面这样写没问题，不过做了大量重复的工作，可以用computed计算属性来简化他：
computed:{
mms:function(){
var arr=[];
for(var i= 1;i<7;i++){
var temObj={};
temObj.name='mm'+i;
temObj.location='http://image.zhangxinxu.com/image/study/s/s128/mm'+i+'.jpg';
arr.push(temObj);
}
return arr;
}
}
mms计算属性所对应的函数返回一个像上面一样的数组。有点在于可以通过i参数来方便的调整mm的数量。这就是计算属性computed和静态属性data相比的强大之处。
效果:
mm1 mm2
mm3
mm4
mm5
mm6
五. 值得注意的点
如果你的list是由原始类型的元素构成，比如下面这样:
data:{
list:[1,2,3]
}
渲染出这样的视图:
现在你想让第一个元素变成5，
通过this.list[0] = 5这样的方法是无效的。无法触发视图的更新。因为它绕过了vue数据绑定的基础Object.defineProperty,因此，需要使用Vue.set方法，来通知VUE进行视图变更
像下面这样:
//this.list[0] = 5 无效 Vue.set(this.list, 0, 5)//三个参数分别是要改变的数组，要改变元素的索引和要改变的值