Vue.js之v-for

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)//三个参数分别是要改变的数组，要改变元素的索引和要改变的值