【Vue】「Vue.js 入门指南」（四）v-for 指令的使用技巧与案例实践
【Vue】「Vue.js 入门指南」（四）v-for 指令的使用技巧与案例实践
使用技巧
基本用法
v-for 是 Vue.js 中的一个指令，用于在数据集（如数组、对象等）上进行迭代，并为每个数据项生成一个 DOM 节点。例如，现在要展示 sɪᴅɪᴏᴛ 的技能列表 items，可以使用以下代码进行迭代：
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>运行结果：
使用索引值
在迭代数据集时，有时需要使用当前迭代的索引值。可以使用 v-for 指令中的第二个参数 index 来获取当前迭代的索引值。例如显示当前技能为 sɪᴅɪᴏᴛ 的第几个技能：
<ul>
<li v-for="(item, index) in items">
第 {{ index+1 }} 技能：{{ item }}
</li>
</ul>运行结果：
对象迭代
除了对数组进行迭代外，v-for 还可以对对象进行迭代。在对象迭代中，可以使用 v-for 指令中的第二个和第三个参数 key 和 value 来获取当前迭代的键和值。例如显示 sɪᴅɪᴏᴛ 的个人信息：
<ul>
<li v-for="(value, key) in person">{{ key }} - {{ value }}</li>
</ul>运行结果：
使用 of 关键字
在 v-for 指令中，还可以使用 of 关键字代替 in 关键字。例如：
<ul>
<li v-for="item of items">{{ item }}</li>
</ul>运行结果：
案例：电子记事本
经过上面的知识学习，让我们写一个小 demo 来练练手，巩固一下吧。
现在有电子记事本模板如下所示：
接下来我们要完成以下功能的开发：
- 渲染记录；
- 添加记录；
- 删除记录；
- 统计记录；
- 清空记录；
渲染记录
在模板中，渲染记录的代码如下所示：
<section class="main">
<ul class="todo-list">
<li class="todo">
<div class="view">
<span class="index">1.</span> <label>爱 sɪᴅɪᴏᴛ</label>
<button class="destroy"></button>
</div>
</li>
</ul>
</section>如果有多条记录，则需要一条一条的添加代码，如下所示：
<span class="index">1.</span> <label>爱 sɪᴅɪᴏᴛ</label>
<span class="index">2</span> <label>...</label>
<span class="index">3.</span> <label>...</label>这样不仅在开发时费时费力，对于后期维护也极其不方便，因此，这里我们通过使用 v-for 指令来优化这些问题。
先准备好数据：
data: {
list: [
{ id: 1, name: '唱' },
{ id: 2, name: '跳' },
{ id: 3, name: 'rap' },
]
}修改代码如下所示：
<li class="todo" v-for="(item, index) in list" :key="item.id">
<div class="view">
<span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label>
<button class="destroy"></button>
</div>
</li>运行结果：
添加记录
既然能渲染记录了，那么我们如何添加记录呢？
<header class="header">
<h1>电子记事本</h1>
<input placeholder="请输入任务" class="new-todo" />
<button class="add">添加任务</button>
</header>可以看到我们界面上有一个输入框，以及一个 “添加任务” 的按钮。在 Vue 中，我们需要给输入框绑定一个属性，以便传递我们在页面上输入的值，同时，我们还需要设计一个添加方法与按钮的点击事件进行绑定。
接下来，我们给输入框绑定一个属性 todoName，代码如下所示：
<input v-model="todoName" placeholder="请输入任务" class="new-todo" />如下图所示，当我们在输入框输入内容时，会绑定到属性 todoName 中：
最后，我们设计一个添加方法，由于我们的数据类型是数组，因此我们需要实现的是向数组中添加元素，代码如下所示：
add() {
this.list.unshift({
id: +new Date(),
name: this.todoName
})
this.todoName = ''
}在上述代码中，add() 函数的主要目的是在数组中添加一个新的待办事项，并清空输入字段 this.todoName。通过 unshift() 方法，将任务记录插入在数组的开头，这样更利于用户体验。
运行结果：
删除记录
既然有了添加记录，那么自然也得有删除记录的功能，大体思路就是根据 id 将元素从数组中移除，代码如下所示：
del(id) {
this.list = this.list.filter(item => item.id !== id)
}运行结果：
统计记录
相信你们雪亮的眼睛都发现了，无论我们是添加记录还是删除记录，左下角合计的数量都是没有变化的，这是因为在模板中，我们直接将合计的数量写死了，因此无论记录增加还是减少，合计的数量都不会发生变化：
<span class="todo-count">合 计:<strong> 1 </strong></span>接下来，我们需要对此进行优化一下，方法其实也很简单，合计数量其实就是数组的长度，因此直接渲染 array.length 即可，代码如下所示：
<span class="todo-count">合 计:<strong> {{ list.length }} </strong></span>运行结果：
清空记录
眼尖的友友们应该发现右下角还有一个 “清空任务” 的字眼，如果记录很多的话，我们一条一条的清除也太麻烦了，因此需要设计一个一次性全部清空的功能。
因为我们使用的是数组类型数据，所以最简单的清空方式就是赋值一个空数组，代码如下所示：
clear () {
this.list = []
}运行结果：
不过上图中没有任务时，还显示 “合计” 与 “清空任务” 可能不太美观，因此我们做一个小小的优化，在没有记录时，隐藏掉底部，代码如下所示：
<!-- 统计和清空 -->
<footer class="footer" v-show="list.length > 0">
...
</footer>运行结果：
后记
在本文中，我们首先介绍了 v-for 指令的基本用法，然后详细讲解了如何使用索引值、对象迭代、以及使用 of 关键字的技巧。最后，我们通过一个 demo：电子记事本案例，演示了如何将这些技巧应用到实际项目中。
以上就是 Vue.js 入门指南：v-for 指令的使用技巧与最佳实践 的所有内容了，希望本篇博文对大家有所帮助！
代码：
参考：
腾讯云开发者
