复习Vue3:列表渲染 v-for

最新推荐文章于 2024-06-24 09:08:05 发布

爱发呆的程序员

最新推荐文章于 2024-06-24 09:08:05 发布

阅读量553

点赞数 1

分类专栏：笔记 Vue 文章标签： vue

本文链接：https://blog.csdn.net/tinglis/article/details/114258797

版权

笔记同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

Vue

21 篇文章 0 订阅

订阅专栏

复习Vue3:列表渲染 v-for

我们可以通过使用v-for指令基于一个数组来渲染一个列表，v-for指令需要使用item in items形式的语法。其中 items是源数组，而item则是被迭代的数组元素的别名。

基本实现的代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表渲染</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- users表示数组，item表示从数组中取出的对象,这个名字可以随意取 -->
        <!-- 注意 v-for必须结合key属性来使用，它会唯一标识数组中的每一项，未来当数组中的那一项改变的时候，它会只更新那一项，好处就是提升性能。注意key的值唯一，不能重复 -->
        <!-- index表示数组的索引值，该名字可以随意定义 -->
        <li v-for="(item,index) in users" :key="item.id">
          编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
        </li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          users: [
            {
              id: 1,
              name: "张三",
            },
            {
              id: 2,
              name: "李四",
            },
            {
              id: 3,
              name: "老王",
            },
          ],
        },
      });
    </script>
  </body>
</html>

注意：为了能够保证列表渲染的性能，我们需要给v-for添加key属性。key的值必须唯一，而且不能使用index和random作为key的值。

关于这一点是与虚拟DOM算法密切相关的。后面会最为一个重点来探讨虚拟DOM的内容.

爱发呆的程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复习Vue3:列表渲染 v-for

复习Vue3:列表渲染 v-for我们可以通过使用v-for指令基于一个数组来渲染一个列表，v-for指令需要使用item in items形式的语法。其中 items是源数组，而item则是被迭代的数组元素的别名。基本实现的代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi
复制链接

扫一扫

专栏目录