Vue v-for用法详解（附带实例）

在网页中，列表是一种非常常见的组件。在列表中，每一行元素都有相似的 UI，只是其填充的数据有所不同，使用 Vue 中的循环渲染指令，我们可以轻松地构建出列表视图。

Vue v-for指令的使用方法

在 Vue 中，v-for 指令可以将一个数组中的数据渲染为列表视图。v-for 指令需要设置为一种特殊的语法，其格式如下：

item in list

在上面的格式中，in 为语法关键字，也可以替换为 of。

在 v-for 指令中，item 是一个临时变量，它是列表中被迭代出的元素，list 是列表变量本身。我们可以新建一个名为 4.for.html 的测试文件，在其 body 标签中编写如下核心代码：

<body>
  <div id="Application">
    <div v-for="item in list">
      {{ item }}
    </div>
  </div>

  <script>
    const { createApp, ref } = Vue;

    const config = {
      setup() {
        const list = ref([1, 2, 3, 4, 5]);   // 定义一个 list 列表数据
        return { list };
      }
    };

    createApp(config).mount('#Application');
  </script>
</body>

运行代码，可以看到网页中正常渲染出了 5 个 div 组件：

图 1 循环渲染效果图

更多时候，我们需要渲染的数据都是对象数据，使用对象来对列表元素进行填充，例如定义联系人对象列表如下：

const list = ref([
    {name: "Lili", num: "151xxxxxxxx"},
    {name: "Jaki", num: "151xxxxxxxx"},
    {name: "Lucy", num: "151xxxxxxxx"},
    {name: "Monki", num: "151xxxxxxxx"},
    {name: "Bei", num: "151xxxxxxxx"}
])

修改要渲染的 HTML 标签结构如下：

<div id="Application">
  <ul>
    <li v-for="item in list">
      <div>{{ item.name }}</div>
      <div>{{ item.num }}</div>
    </li>
  </ul>
</div>

运行代码，效果如下图所示：

图 2 使用对象数据进行循环渲染

在 v-for 指令中，我们也可以获取到当前遍历项的索引，示例如下：

<ul>
  <li v-for="(item, index) in list">
    <div>{{ index + "." + item.name }}</div>
    <div>{{ item.num }}</div>
  </li>
</ul>

需要注意，index 索引的取值是从 0 开始的。

在上述代码中，v-for 指令遍历的是列表，实际上我们也可以对一个 JavaScript 对象进行 v-for 遍历。在 JavaScript 中，列表本身也是一种特殊的对象，我们使用 v-for 遍历对象时，指令中的第 1 个参数为遍历的对象中的属性的值，第 2 个参数为遍历的对象中的属性的名字，第 3 个参数为遍历的索引。首先，定义对象如下：

const preson = ref({
    name: "Lili",
    age: "00",
    num: "151xxxxxxxx",
    emali: "xxxx@xx.com"
})

我们使用有序列表来承载 preson 对象的数据，代码如下：

<ol>
  <li v-for="(value, key, index) in person">
    {{ key }}: {{ value }}
  </li>
</ol>

运行代码，效果如下图所示：

图 3 将对象数据渲染到页面上

需要注意，在使用 v-for 指令进行循环渲染时，为了更好地对列表项进行重用，我们可以将其 key 属性绑定为一个唯一值，代码如下：

<ol>
  <li v-for="(value, key, index) in person" :key="index">
    {{ key }}: {{ value }}
  </li>
</ol>

当列表数据发生修改时，Vue 默认采用“就地更新”的策略来更新页面上的元素。为列表中的每个元素指定一个唯一的 key 值可以帮助 Vue 更高效地追踪和重用节点，从而提高更新性能。

Vue v-for指令的高级用法

当我们使用 v-for 对列表进行循环渲染后，实际上就实现了对这个数据对象的绑定。当我们调用下面这些函数对列表数据对象进行更新时，视图也会对应地更新：

push()      // 向列表尾部追加一个元素
pop()       // 删除列表尾部的一个元素
shift()     // 删除列表头部的一个元素
unshift()   // 向列表头部插入一个元素
splice()    // 对列表进行分割操作
sort()      // 对列表进行排序操作
reverse()   // 对列表进行逆序操作

首先在页面上添加一个按钮来演示列表逆序操作。

<button @click="click">
    逆序
</button>

定义 Vue 组件方法如下：

const click = () => {
    list.value.reverse()
}

运行代码，可以看到当单击页面上的按钮时，列表元素的渲染顺序会进行正逆切换。当我们需要对整个列表都进行替换时，直接将列表变量重新赋值即可。

在实际开发中，原始的列表数据往往并不适合直接渲染到页面上，v-for 指令支持在渲染前对数据进行额外的处理，修改标签如下：

<ul>
  <li v-for="(item, index) in handle(list)">
    <div>{{ index + "." + item.name }}</div>
    <div>{{ item.num }}</div>
  </li>
</ul>

在上述代码中，handle 为定义的处理函数，在进行渲染前，会通过这个函数对列表数据进行处理。例如，我们可以使用过滤器对列表数据进行过滤渲染，实现 handle 函数如下：

const handle = (l)=> {
    return l.filter(obj => obj.name != "珲少")
}

当需要同时循环渲染多个元素时，与 v-if 指令类似，最常用的方式是使用 template 标签进行包装，例如：

<template v-for="(item,index) in handle(list)">
    <div>{{index + "." + item.name}}</div>
    <div>{{item.num}}</div>
</template>

如果只是需要让某个元素重复渲染，不依赖具体数据，v-for 指令遍历的对象也支持设置为数值，代码如下：

<div v-for="n in 5">
    重复次数：{{n}}
</div>

另外，当在同一个标签上使用 v-for 与 v-if 指令时，v-if 指令的优先级更高。也就是说，v-if 指令中不可以使用 v-for 遍历出的数据，例如下面的代码是错误的：

<div v-for="n in 5" v-if="n!=3">
    重复次数：{{n}}
</div>

Vue v-for用法详解（附带实例）

Vue v-for指令的使用方法

Vue v-for指令的高级用法

相关文章