v-for用法小结
第一次写博客，有不当之处望大家多多指教。
不记得是看过哪个博主的文章才理解v-for的用法，希望没有侵权，迫不及待和大家分享一下。
下面我将通过迭代，普通数组，对象数组，以及对象三个方面展现v-for的神奇用法。话不多说直接上代码。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>
<!--普通数组-->
<!--循环普通数组，可以有两个参数，第一个item是数组元素的别名，第二个i是索引值，可以理解为数组下标。list是数组名。-->
<p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p>
<p v-for="item in list">每一项--{{item}}</p>
<br/>
<!--v-for循环对象数组-->
<!--循环对象数组和普通数组同理-->
<p v-for="(user,i) in listObj">--索引值--{{i}}--id--{{user.id}}</p>
<p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p>
<br/>
<!--注意，在遍历对象的键值对的时候，除了有 val 和 key,在第三个位置还有一个索引-->
<p v-for="(val,key,i) in user">--索引值--{{i}}--键是--{{key}} --值是--{{val}}</p>
<br/>
<!-- in 后面我们放过数组、对象数组、对象，还可以放数字-->
<!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
<p v-for="count in 10">这是第{{count}}次循环</p>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
//普通数组
list:[1,2,3,4,5,6],
//对象数组
listObj:[
{id:1, name:'z1'},
{id:2, name:'z2'},
{id:3, name:'z3'},
{id:4, name:'z4'},
{id:5, name:'z5'},
{id:6, name:'z6'},
],
//对象
user:{
id:2,
name:'lin',
gender:'男'
}
}
});
</script>
</html>
运行结果如下
–索引值–0 --每一项–1
–索引值–1 --每一项–2
–索引值–2 --每一项–3
–索引值–3 --每一项–4
–索引值–4 --每一项–5
–索引值–5 --每一项–6
每一项–1
每一项–2
每一项–3
每一项–4
每一项–5
每一项–6
–索引值–0--id–1
–索引值–1--id–2
–索引值–2--id–3
–索引值–3--id–4
–索引值–4--id–5
–索引值–5--id–6
–id–1 --姓名–z1
–id–2 --姓名–z2
–id–3 --姓名–z3
–id–4 --姓名–z4
–id–5 --姓名–z5
–id–6 --姓名–z6
–索引值–0--键是–id --值是–2
–索引值–1--键是–name --值是–lin
–索引值–2--键是–gender --值是–男
这是第1次循环
这是第2次循环
这是第3次循环
这是第4次循环
这是第5次循环
这是第6次循环
这是第7次循环
这是第8次循环
这是第9次循环
这是第10次循环
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
