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:'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg'}, {name:'mm2',location:'http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg'}, {name:'mm3',location:'http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg'}, {name:'mm4',location:'http://image.zhangxinxu.com/image/study/s/s128/mm4.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)//三个参数分别是要改变的数组,要改变元素的索引和要改变的值