Vue中v-for的使用

最新推荐文章于 2024-05-14 10:23:51 发布

Bil!

最新推荐文章于 2024-05-14 10:23:51 发布

阅读量2.1k

点赞数 3

分类专栏：前端框架

本文链接：https://blog.csdn.net/weixin_45045689/article/details/109480886

版权

前端框架专栏收录该内容

8 篇文章 0 订阅

订阅专栏

v-for遍历数组和对象

用v-for进行遍历Vue实例中的数据，有多少个数据需要遍历，那么Vue就会帮我们创建多少个对应的标签的。

v-for遍历数组：

用v-for遍历数组，可以拿到数据的下标值和元素的值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 1.在遍历的过程中，没有使用索引值（下标值） -->
        <ul>
            <li v-for="item in names">{{item}}</li>
        </ul>

        <!-- 2.在遍历的过程中，获取索引值 -->
        <ul>
            <li v-for="(item,index) in names">
                {{index}}.{{item}}
            </li>
        </ul>

    </div>

    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                names: ["lv", "kobe", "james", "curry"]
            }
        });
    </script>

</body>

</html>

用v-for指令还可以遍历对象？？？这在C++语言上无法想象呀！

v-for遍历的是对象的每个属性的。

用v-for遍历对象的话，可以拿到下标值，属性名和属性值。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value -->
    <ul>
      <li v-for="item in person">{{item}}</li>
    </ul>

    <!-- 2.获取key和value  格式：(value,key) -->
    <ol>
      <li v-for="(value,key) in person">{{key}}:{{value}}</li>
    </ol>

    <!-- 3.获取key和value 以及index  格式：（value,key,index） -->
    <div v-for="(value,key,index) in person">{{index}}.{{key}}:{{value}}</div>
  </div>

  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        person: {
          name: "lv",
          age: 21,
          "height": 1.75,
          school: {
            schoolName: "ZSC",
            scoolAge: 32
          },
          study: function () {
            console.log("studying");
          }
        }
      }
    });
  </script>

</body>

</html>

结果：

v-for绑定key和非绑定key的区别

推荐使用v-for时，给对应的元素或组件加上一个:key属性。

为什么？

当某一层有很多相用的节点时，也就是列表节点时，我们希望插入一个新的节点：

A B C D E ---> A B F C D E

我们希望可以在B 和 C 之间加一个F ，diff算法默认执行是这样的：

及把C更新成F，D更新成C , E更新成D ，最后再插入E 。这样做没有效率，时间复杂度为O(n)

所以我们需要使用key来给每个节点做一个唯一标识。

从而使diff算法可以正确的识别此节点，找到正确的位置插入新的节点。使时间复杂度变为O(1)

key的作用是为了高效的更新虚拟DOM。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 注意每个key要唯一 -->
            <li v-for="item in letters":key = "item">{{item}}</li>
        </ul>
    </div>

    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                letters:['A','B','C',"D",'E']
            }
        });
    </script>

</body>

</html>

Bil!

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue中v-for的使用

v-for遍历数组和对象用v-for进行遍历Vue实例中的数据，有多少个数据需要遍历，那么Vue就会帮我们创建多少个对应的标签的。v-for遍历数组：用v-for遍历数组，可以拿到数据的下标值和元素的值。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device.
复制链接

扫一扫