Vue.js之v-for

框架

浏览数:476

2019-8-15

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

 

作者:nobody-junior