v-for使用（key使用）

最新推荐文章于 2024-03-27 20:09:56 发布

407指导员

最新推荐文章于 2024-03-27 20:09:56 发布

阅读量946

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/111076721

版权

vue 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

v-for使用

遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>遍历数组</title>
</head>
<body>
<div id="app">
  <ul>
    <!--遍历过程中获取下标值，下标固定第二个变量，下标值可参与运算-->
    <li v-for="(m,index) in names">{{index+1}}--{{m}} </li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      names:['LCQ','LQJ','TTY','LHB']
    }
  });
</script>
</body>
</html>

遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>遍历对象</title>
</head>
<body>
<div id="app">
  <!--在遍历对象的过程中，如果只是获取一个值，那么这个值就是value-->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>
  <!--同时获取key和value,前边的value后边的key,value更加重要-->
  <ul>
    <li v-for="(value,key) in info">{{key}}:{{value}}</li>
  </ul>
  <!--获取key和value和index的格式，(value,key,index)-->
  <ul>
    <li v-for="(value,key,index) in info">{{index}}--{{key}}:{{value}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'TTY',
        age: 56,
        height: 1.63
      }
    }
  });
</script>
</body>
</html>

注意点

核心内容对应参数在前，上边遍历数组，内容在下标前。

下边遍历对象，第一个参数就是内容value,两个参数才有key,最无关的index下标在最后。

所以只要一个参数，返回就是value，对个参数用()括起来，逗号隔开。

组件的key属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>添加key</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
  </ul>>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['A','B','C','D','E']
    }
  });
</script>
</body>
</html>

在这里插入图片描述

我们正常的情况下dom插入元素，会将插入之后的元素全部修改，依次后移，然后将该位置插入元素效率十分低下。

而vue的虚拟DOM，如果给节点绑定key后，如果插入元素时，key值和内容对应没有改变，那么就会保持之前的对应关系，那么dif就可以正确识别此节点，然后插入，高效率的跟新虚拟DOM。

注意key值的绑定一定要是核心内容，绑定index就没有必要，为了辨别内容是否改变。

407指导员

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
v-for使用（key使用）

v-for使用遍历数组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>遍历数组</title></head><body><div id="app"> <ul>  <li v
复制链接

扫一扫