Vue框架学习笔记——列表渲染：v-for

news2024/12/26 9:18:29

文章目录

前文提要
代码正文

前文提要

本人仅做个人学习记录，如有错误，请多包涵

主要学习链接：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

代码正文

<body>
  <div id="box">
    <ul>
      <li v-for="(p,index) in persons" :key="index">
        {{p.name}}-{{p.age}}
      </li>
    </ul>
  </div>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
      el: '#box',
      data: {
        persons:[
          {id:1,name:'张',age:18},
          {id:2,name:'李',age:14},
          {id:3,name:'赵',age:19},
        ]
      }
    })
  </script>
</body>

效果展示：
在这里插入图片描述
上文代码其中的

<li v-for="(p,index) in persons" :key="index">
        {{p.name}}-{{p.age}}
</li>

就是v-for的使用方式，将能够遍历对象、数组、字符串，无论是data中的属性、计算属性都可以。

如果key不写，也就是写成这样

<li v-for="(p,index) in persons">
        {{p.name}}-{{p.age}}
</li>

就是默认使用index做遍历时的标记，但是不建议使用index做遍历的下标，遍历带有输入的标签的时候容易出错。（和Vue中的虚拟DOM、真实DOM的机制有关系：虚拟DOM对比算法）
用户能操作的是界面，这个是真实DOM
key是Vue内部使用的，只会在虚拟DOM中出现，真实DOM中没有。
可以通过这个链接了解：key的作用和原理（尚硅谷）

建议使用id做遍历时候的下标，具有唯一标识性，index只是暂时属于某个属性，不是一直属于某个属性，当往最前方插入的时候，后续的下标都会变化，并不会一直属于这个属性。

所以推荐使用id做遍历时的标识

<li v-for="(p,id) in persons" :key="p.id">
        {{p.name}}-{{p.age}}
      </li>

也就是写成这样

至此，结束。

如果你觉得这篇文章写的不错，多多点赞~收藏吧！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1282774.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！