v-for循环普通数组
![](https://i-blog.csdnimg.cn/blog_migrate/d05317c487a75ab58905edd30f16662d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e319d3e610c9d5c008e363819071ec8a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/070d7f486cab38dd5b285b96aa2fa003.png)
v-for循环对象数组
![](https://i-blog.csdnimg.cn/blog_migrate/0b679a5de8ad95f2dc2dc5851b866e1d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/230984ec595617ce9a1002d8ec86b227.png)
v-for循环对象
![](https://i-blog.csdnimg.cn/blog_migrate/b156d775ce8fd41b7ec479dd0e99eeb2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cc661e5ba0fcb44f118d9fbd2aa716b9.png)
v-for迭代数字
![](https://i-blog.csdnimg.cn/blog_migrate/8773c4a1f3e31fe2a1b874d57b892362.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5ae1ed83104e690750b9426f455b4c03.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1d93c882a0c0b0989db79d36f63aea86.png)
v-for循环中key属性的使用
![](https://i-blog.csdnimg.cn/blog_migrate/ea1df3536efd4c3228879b1f7f49b9cb.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.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>
<!-- 注意: v-for 循环的时候,key 属性只能使用 number获取string -->
<!-- 注意: key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值 -->
<!-- 在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果 v-for 有问题,必须 在使用 v-for 的同时,指定 唯一的 字符串/数字 类型 :key 值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '嬴政' },
{ id: 3, name: '赵高' },
{ id: 4, name: '韩非' },
{ id: 5, name: '荀子' }
]
},
methods: {
add() { // 添加方法
this.list.unshift({ id: this.id, name: this.name })
}
}
});
</script>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/2b80da21ec14322142dd3fb43bc7ce94.png)