三种
- 迭代数组,对象数组
- 迭代对象
- 迭代数字
普通数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.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>
<!--1.1循环普通数组 -->
<!-- 循环每一项item list循环数组 -->
<p v-for="item in list">{{item}}</p>
<!-- 每一项的索引值 -->
<!-- [].foreach((item,i)=>{}) -->
<p v-for="(item,i) in list">索引值是：{{i}}值为：{{item}}</p
</div>
<!-- -->
<script>
var vm = new Vue({
el: "#app",
data: {
list:[1,2,3,4,5]
}
})
</script>
</body>
</html>
循环对象数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--1.2循环对象数组 -->
<p v-for="(user,i) in list1">id是：{{user.id}}name是：{{user.name}} 索引是：{{i}}</p>
</div>
<!-- -->
<script>
var vm = new Vue({
el: "#app",
data: {
list1:[{id:1,name:"lu"},{id:2,name:"li"},{id:3,name:"wang"},{id:4,name:"zhang"}]
}
})
</script>
</body>
</html>
循环对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.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>
<!--1.1循环普通数组 -->
<!-- 循环每一项item list循环数组 -->
<p v-for="item in list">{{item}}</p>
<!-- 每一项的索引值 -->
<!-- [].foreach((item,i)=>{}) -->
<p v-for="(item,i) in list">索引值是：{{i}}值为：{{item}}</p>
<!--1.2循环对象数组 -->
<p v-for="(user,i) in list1">id是：{{user.id}} name是：{{user.name}} 索引是：{{i}}</p>
<!--1.3 循环对象 键值对组成的value和key-->
<p v-for="(val ,key,i) in user">值是：{{val}} 键是{{key}} 索引是：{{i}}</p>
</div>
<!-- -->
<script>
var vm = new Vue({
el: "#app",
data: {
list:[1,2,3,4,5],
list1:[{id:1,name:"lu"},{id:2,name:"li"},{id:3,name:"wang"},{id:4,name:"zhang"}],
user:{
id:1,
name:"wang",
gender:'男'
}
}
})
</script>
</body>
</html>
迭代数字
<!-- 1.4 in 后面我们放数组，对象，对象数组，还可以放数字 注意使用v-for迭代数字从一开始-->
<p v-for="count in 10">这是第{{count}}循环</p>
key的使用
-
数据的唯一性，渲染的值唯一
-
在组件钟使用v-for循环中，指定唯一的字符串或数值：key值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <label for="">Id: <input type="text" v-model="id"> </label> <label for="">name: <input type="text" v-model="name"> </label> <input type="button" value="添加" @click="add"> <!-- key 的值item是每个循环的唯一值，key属性不能用对象 ，用number或string--> <p v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}}item.id----{{item.name }}</p> </div> <!-- --> <script> var vm = new Vue({ el: "#app", data: { list: [{ id: 1, name: "lu" }, { id: 2, name: "li" }, { id: 3, name: "wang" }, { id: 4, name: "zhang" }] }, methods: { add() { // 1.1尾部 // this.list.push({ id: this.id, name: this.name }) // 1.2头部 this.list.unshift({ id: this.id, name: this.name }) // checkbox的应用，没有指定key勾选就有问题 } }, }) </script> </body> </html>
