1、遍历普通数组
<body>
<div id="app">
<p v-for="item in list">{{item}}</p>
<hr>
<p v-for="(item,i) in list">数组索引:{{i}}---数组每一项:{{item}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
list:[1,2,3,4,5,6]
},
methods:{}
});
</script>
</body>
上述代码块中
<p v-for="item in list">{{item}}</p>
这里的item指的是list中的元素,结果如图中第一种输出方式。<p v-for="(item,i) in list">数组索引:{{i}}---数组每一项:{{item}}</p>
这里的(item,i)形式,表示i为索引,item为数组元素。
2、遍历对象数组
<body>
<div id="app">
<!-- <p v-for="item in list">{{item}}</p>
<hr> -->
<p v-for="user in list">ID:{{user.id}}---名字:{{user.name}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'zhangsan'},
{id:2,name:'lisi'},
{id:3,name:'wangwu'}
],
},
methods:{}
});
</script>
</body>
结果为:
对象的索引使用方法
3、循环遍历对象
一般对象都是由“value:key”的组成形式,遍历的话和之前的也是大同小异。
在这里,顺序不要搞错,一般都是value在前,key在后。当然这里也是可以添加索引的,即(val,key,i)i即为索引。最终结果为:
4、迭代数字
5、循环中key值的使用
一般情况下,我们需要选定循环中的某一项,默认选中的是其索引,而非某一项。来看下面的问题:选中list中某一个元素后,需要在list开头添加元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vueDemo01</title>
<!--导入vue的包 -->
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<label>ID:
<input type="text" v-model="id">
</label>
<label>name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<p v-for="item in list" >
<input type="checkbox">
{{item.id}}-----{{ item.name }}
</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'李斯'},
{id:2,name:'嬴政'},
{id:3,name:'赵高'},
{id:4,name:'韩非'},
]
},
methods:{
add(){
// his.list.push({id:this.id,name:this.name})
this.list.unshift({id:this.id,name:this.name})
}
}
});
</script>
</body>
</html>
结果:
当添加一个元素后
选中的已经是list中更新的第一项,而非我们希望的一项。此时需要用到key绑定。
<!-- 注意v-for 循环的时候,key属性只能使用number获取string或者string-->
<!-- key使用的时候,必须用v-bind属性绑定 ,指定key的值-->
<p v-for="item in list" v-bind:key="item.id">
<input type="checkbox">
{{item.id}}-----{{ item.name }}
</p>
现在就可以解决这个问题。