Vue框架学习笔记——列表渲染：v-for
文章目录
- 前文提要
- 代码正文
前文提要
本人仅做个人学习记录，如有错误，请多包涵
主要学习链接：尚硅谷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的机制有关系）
可以通过这个链接了解：key的作用和原理（尚硅谷）
建议使用id做遍历时候的下标，具有唯一标识性，index只是暂时属于某个属性，不是一直属于某个属性，当往最前方插入的时候，后续的下标都会变化，并不会一直属于这个属性。
所以推荐使用id做遍历时的标识
<li v-for="(p,id) in persons" :key="p.id">
{{p.name}}-{{p.age}}
</li>
也就是写成这样
至此，结束。
如果你觉得这篇文章写的不错，多多点赞~收藏吧！