Version: Next

5. v-for

5.1 v-for遍历对象

v-for：用来对对象进行遍历

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<span v-for="u in user">
<span v-text="u"></span>
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
user: {
name: "Alice",
age: 23
}
}
})
</script>
</body>
</html>

5.2 v-for遍历对象中的属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<span v-for="(value, key, index) in user">
索引：{ {index} } | Key: { {key} } | Value: { {value} } <br>
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
user: {
name: "Alice",
age: 23
}
}
})
</script>
</body>
</html>
索引：0 | Key: name | Value: Alice
索引：1 | Key: age | Value: 23

5.3 v-for遍历对象数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<span v-for="(value, key, index) in users">
索引：{ {index} } | Key: { {key} } | Value: { {value} } <br>
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
users: [{name: "Alice",age: 23}, {name:"bob",age:16}]
}
})
</script>
</body>
</html>
索引： | Key: 0 | Value: { "name": "Alice", "age": 23 }
索引： | Key: 1 | Value: { "name": "bob", "age": 16 }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<span v-for="u in users">
{ {u.name} } : { {u.age} } <br>
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
users: [{name: "Alice",age: 23}, {name:"bob",age:16}]
}
})
</script>
</body>
</html>
Alice : 23
bob : 16

5.4 v-for遍历数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="a in arr">{{a}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
arr: [
"北京",
"上海",
"西安"
]
}
})
</script>
</body>
</html>
北京
上海
西安

5.5 维护状态

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的 track-by="$index"。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<span v-for="u in users" v-bind:key="u.id">
{{u.name}} : {{u.age}} <br>
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vue = new Vue({
el: "#app",
data: {
users: [{id:1,name: "Alice",age: 23}, {id:2,name:"bob",age:16}]
}
})
</script>
</body>
</html>