网络应用程序设计报告,番禺seo培训,品牌推广策略案例,wordpress文档结构文章目录 前文提要代码正文 前文提要
本人仅做个人学习记录#xff0c;如有错误#xff0c;请多包涵
主要学习链接#xff1a;尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 代码正文
bodydiv idboxulli v-for(p,index)… 文章目录 前文提要代码正文 前文提要
本人仅做个人学习记录如有错误请多包涵
主要学习链接尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 代码正文
bodydiv idboxulli v-for(p,index) in persons :keyindex{{p.name}}-{{p.age}}/li/ul/div/divscript typetext/javascriptVue.config.productionTip falseconst 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 :keyindex{{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 :keyp.id{{p.name}}-{{p.age}}/li也就是写成这样 至此结束。
如果你觉得这篇文章写的不错多多点赞~收藏吧
