【Vue】「Vue.js 入门指南」（四）v-for 指令的使用技巧与案例实践

前言

本篇博文是《Vue.js 打怪升级之路》中入门系列的第四篇博文，主要内容是详细介绍 Vue 指令 v-for 的含义与用法，并通过一个案例---电子记事本的设计与开发，来展示如何在实战中使用 Vue 指令进行开发 ，往期系列文章请访问博主的 Vue 专栏，博文中的所有代码全部收集在博主的 GitHub 仓库中；

使用技巧

基本用法

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>

运行结果：

【v-for 指令】代码点击此处跳转。

案例：电子记事本

经过上面的知识学习，让我们写一个小 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 指令的使用技巧与最佳实践 的所有内容了，希望本篇博文对大家有所帮助！

代码：

• v-for；
• 电子记事本模板；
• 电子记事本案例；

参考：

• Vue2 官方文档；
• Vue3 官方文档；
• 黑马 2023新版 Vue2+Vue3 ；

📝 上篇精讲：Vue.js 入门指南：（三）常用指令的含义与用法

💖 我是 𝓼𝓲𝓭𝓲𝓸𝓽，期待你的关注，创作不易，请多多支持；

👍 公众号：sidiot的技术驿站；

🔥 系列专栏：Vue.js 打怪升级之路