前文提要
主要学习链接：尚硅谷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中的属性、计算属性都可以。
<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只是暂时属于某个属性，不是一直属于某个属性，当往最前方插入的时候，后续的下标都会变化，并不会一直属于这个属性。
<li v-for="(p,id) in persons" :key="p.id">
{{p.name}}-{{p.age}}
</li>
也就是写成这样
至此，结束。
原文地址:https://blog.csdn.net/Aer_7z/article/details/134778893
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_42182.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
