以下是对 v-for 回炉学习的一个汇总总结。内容分为四个部分：
- 数组遍历
- 对象遍历
- 数值遍历
- key属性
- template标签
先说常规用法，key属性后面再讲，各位大佬稍等片刻，我先回炉充个电。
1. 数组遍历
（1）单纯遍历
v-for="item in arr"
其中item为数组遍历后的各个元素，arr为目标遍历数组。item名称支持自定义。
代码示例：
<div id="app">
<ul>
<li v-for="item in arr">内容为：{{ item }}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: ["输入框1", "输入框2", "输入框3"]
}
})
</script>
效果示例：
（2）带索引遍历
v-for="(item, index) in arr"
其中index为各个元素对应数组中的索引，支持名称自定义，其他同上。
代码示例：
<div id="app">
<ul>
<li v-for="(item, index) in arr">
内容为：{{ item }}， 索引为：{{ index }}
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: ["输入框1", "输入框2", "输入框3"]
}
})
</script>
效果示例：
2.对象遍历
（1）单纯遍历
v-for="value in obj"
其中item为对象遍历后的对应value值，obj为目标遍历数组。item名称支持自定义。
代码示例：
<div id="app">
<ul>
<li v-for="value in obj">
内容为：{{ value }}
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
obj: {
input1: "输入框1",
input2: "输入框2",
input3: "输入框3"
}
}
})
效果示例：
（2）带键的遍历
v-for="(value, key) in obj"
其中key为对象对应元素的键，支持名称自定义。
代码示例：
<div id="app">
<ul>
<li v-for="(value, key) in obj">
对象内容为：{{ value }}, 键为：{{ key }}
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
obj: {
input1: "输入框1",
input2: "输入框2",
input3: "输入框3"
}
}
})
效果示例：
（3）带键和索引的遍历
v-for="(value, key, index) in obj"
其中index为对象对应元素的索引，支持名称自定义。
代码示例：
<div id="app">
<ul>
<li v-for="(value, key, index) in obj">
对象内容为：{{ value }}, 键为：{{ key }}, 索引为：{{ index }}
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
obj: {
input1: "输入框1",
input2: "输入框2",
input3: "输入框3"
}
}
})
</script>
效果示例：
3.数值遍历
v-for="(item, index) in 5"
其中5为遍历目标数值，表示遍历生成的元素个数为5，此处为示例。item为每一个遍历的元素，index为对应元素的索引。
代码示例：
<div id="app">
<ul>
<li v-for="(item, index) in 5">
第{{ item }}个元素, 索引为：{{ index }}
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app'
})
</script>
效果示例：
4.key属性
在使用 v-for 时，应指定唯一的 key 属性，可以避免问题和提高渲染的性能。
场景举例：
当用户在三个输入框中输入对应内容时，尝试在控制台中使用reverse()方法倒序处理数组元素。
当未添加key属性时，效果如下：
当添加key为索引时，效果如下：
当添加key为元素值时，效果如下：
代码示例：
<div id="app">
<ul>
<li v-for="(item, index) in arr" :key="index">
{{ item }}: <input type="text">
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: ["输入框1", "输入框2", "输入框3"]
}
})
</script>
通过上述对比，可以得到两个结论：
- 使用 v-for 时不加 key 属性会出现元素渲染后不对应的问题；
- key属性的值必须是唯一的才可以生效。
那么问题来了，当数组中存在两个完全相同的数据时，key属性该如何设置呢？
一般情况下，接口返回的数据都会带有唯一的id值，直接将对应 id 值设置给key。
代码示例:
<div id="app">
<ul>
<li v-for="item in arr" :key="item.id">
{{ item.value }}: <input type="text">
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: [
{
id: 0,
value: "输入框1"
},
{
id: 1,
value: "输入框2"
},
{
id: 2,
value: "输入框2"
}
]
}
})
</script>
效果示例：
5.template标签
很多场景都是 v-for 一把梭，是否存在其他场景呢？
比如只想遍历生成内部的元素，不想带有外层结构。
此时就要提到<template>标签了。
使用<template>标签设置模板占位符，可以只遍历生成内部元素的结构。
注意：由于<template>标签不存在真实的dom结构中，故不能且不需要添加key属性（即key属性只添加在真实的元素内部）。
代码示例：
<div id="app">
<template v-for="item in arr">
<p>{{ item.value }}: <input type="text"></p>
</template>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
arr: [
{
id: 0,
value: "输入框1"
},
{
id: 1,
value: "输入框2"
},
{
id: 2,
value: "输入框2"
}
]
}
})
</script>
效果示例：
想要深入了解虚拟dom原理的小伙伴，下回再继续充电。
希望各位大佬不吝赐教，多多支持！
