1、循环对象数组,数组中可存储对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="(item,i) in list">{{item.id}}------{{item.name}}---{{i}}</li>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
list:[
{id:1,name:'zs1'},
{id:2,name:'zs2'},
{id:3,name:'zs3'},
{id:4,name:'zs4'},
]
}
})
</script>
</body>
</html>
2、还可以遍历对象,遍历对象中的简直对,除了有val和key之外,还可以遍历索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="(val,key) in user">{{val}}------{{key}}</li>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
user:{
name:"lidan",
sex:'man',
old:12
}
}
})
</script>
</body>
</html>
3、也可以迭代数字,迭代的数字从1开始,而不是从0开始。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="count in 10">{{count}}</li>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
user:{
name:"lidan",
sex:'man',
old:12
}
}
})
</script>
</body>
</html>
v-for中key值的使用
v-for循环时,key属性只能使用number获取string
在使用key时,必须使用v-bind属性绑定形式指定key值。
在组件中,使用v-for循环的时候,或者一些特殊情况中,如果v-for有问题。必须使用v-for的同时指定唯一的字符串或者数字