循环遍历

v-for遍历数组

当我们有一组数据需要进行渲染时,我们就可以使用v-for完成。 v-for类似于js中的for循环 格式:

v-for=“item in Data”。 item表示每一项的名称,Data表示要遍历的数组。v-for="(item,index) in Data"。 item表示每一项的名称,index表示索引,Data表示要遍历的数组 <ul id="app"> <!-- (item,index) in 数组 这个写法可以显示数组下标 --> <li v-for="(item,index) in book">{{index+':'+item}}</li> </ul> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ book:["从入门到精通","颈椎病康复指南","心脏病康复指南","活着"] } }) </script>

v-for遍历对象

v-for可以遍历对象。比如某个对象中存储着信息,我们希望用列表的形式显示出来。 语法:v-for="(value,key,index) in Obj" value表示对象内容的值,key表示键,index表示索引

<ul id="app"> <li v-for="(value,key,index) in student">{{index+':'+key+':'+value}}</li> </ul> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ student:{ id:345, name:"张三", age:18, hobby:"唱跳rap" } } }) </script>

v-for遍历数组对象

Vue官方建议,如果我们使用v-for去遍历一个对象,数组的话,建议给对应的元素或者组件上加一个key属性

<ul id="app"> <li v-for="item in stuList" :key="item.id">{{item.id +':'+ item.name +':'+ item.age +':'+ item.hobby}}</li> </ul> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ stuList:[ {id:1,name:"张三",age:18,hobby:"唱跳rap"}, {id:2,name:"李四",age:19,hobby:"唱跳篮球"}, ] } }) </script>