vue中v-for循环的四种使用
1.v-for循环普通数组
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<!--<p>{{list[0]}}</p>
<p>{{list[1]}}</p>
<p>{{list[2]}}</p>
<p>{{list[3]}}</p>
<p>{{list[4]}}</p>-->
<p v-for="(item,i) in list">索引值:{{i}}--每一项：{{item}}</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
list:[1,2,3,4,5]
}
})
</script>
</body>
</html>
2.v-for循环对象数组
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<p v-for="(user,i) in list">id:{{user.id}}---name:{{user.name}}----索引:{{i}}</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
list:[
{id:1,name:'ss1'},
{id:2,name:'ss2'},
{id:3,name:'ss3'},
{id:4,name:'ss4'}
]
}
})
</script>
</body>
</html>
3.v-for循环对象
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<!--在遍历对象身上的键值对的时候，除了有val,key还有第三个值索引-->
<p v-for="(val,key,i) in user">值是：{{val}}------键：{{key}}---------索引:{{i}}</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
user:{
id:1,
name:'张三',
gender:'男'
}
}
})
</script>
</body>
</html>
4.v-for迭代数字
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.min.js" ></script>
</head>
<body>
<div id="app">
<!--in后面我们放普通数组，对象数组，对象，还可以方数字-->
<!--如果使用v-for迭代素质count从1开始-->
<p v-for="count in 10">这是第{{count}}次循环</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
5.总结
in后面我们放普通数组，对象数组，对象，还可以方数字
原创文章 73
获赞 64
访问量 2739