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

文章目录


前文提要

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

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


代码正文

html 复制代码
<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>

效果展示:

上文代码其中的

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

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

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

html 复制代码
<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做遍历时的标识

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

也就是写成这样


至此,结束。

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

相关推荐
hnlucky4 分钟前
redis 数据类型新手练习系列——Hash类型
数据库·redis·学习·哈希算法
Invinciblenuonuo13 分钟前
FreeRTOS学习笔记【10】-----任务上下文切换
笔记·学习
好奇龙猫14 分钟前
日语学习-日语知识点小记-构建基础-JLPT-N4阶段(11): てあります。
学习
美味的大香蕉31 分钟前
Spark-SQL与Hive
笔记
_Hello_Panda_36 分钟前
FX10(CYUSB4014)USB3.2(10Gbps)开发笔记分享(1):硬件设计与开发环境搭建
笔记·fpga开发·fx10·cyusb4014
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
2501_915373881 小时前
Node.js 学习入门指南
学习·node.js
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim1 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js