索引值的兩種寫法：?
<!--index遍歷時的默認索引值-->
<ul>
<li v-for="(p,index) in persons":key="index">
{{p.name}}--{{p.age}}
</li>
</ul>?文章來源地址http://www.zghlxwxcb.cn/news/detail-591170.html
?代碼：
v-for="p in persons"??:key="p.id"
? ? ? ? persons ：指的是data中定義的那些數據，數據池。
? ? ? ? p?：是一個形參，接收persons中的每一個數據。
? ? ? ? :key="p.id" ：動態(tài)綁定數據，讓每一個li都有唯一的標識（每一個節(jié)點的標識）。
<body>
<div id="root">
<h2>人員列表</h2>
<ul>
<li v-for="p in persons":key="p.id">
{{p.name}}--{{p.age}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'張三',age:'18'},
{id:'002',name:'里嘶',age:'12'},
{id:'003',name:'王五',age:'19'},
]
}
})
</script>
</body>?
?遍歷數組和遍歷對象：
<body>
<div id="root">
<!--遍歷數組-->
<h2>人員列表</h2>
<ul>
<li v-for="(p,index) in persons":key="index">
{{p.name}}--{{p.age}}
</li>
</ul>
<!--遍歷對象-->
<h2>車輛信息</h2>
<ul>
<li v-for="(value,k) in car" :key="k">
{{k}}--{{value}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'張三',age:'18'},
{id:'002',name:'里嘶',age:'12'},
{id:'003',name:'王五',age:'19'},
],
car:{
name:'奧迪a8',
price:'70萬',
color:'黑色',
}
}
})
</script>
</body>
?關于key作用與原理：
? ? ? ? index作為key進行遍歷（虛擬dom里面用數據以及節(jié)點內部結構進行對比，相同不更新用之前的數據，不同新的數據覆蓋舊的數據）
?????????id作為key進行遍歷（虛擬dom里面用key進行對比）：
?用index會出現的問題：
<div id="root">
<!--遍歷數組-->
<h2>人員列表</h2>
<button @click.once="add">添加一個運動員</button>
<ul>
<li v-for="(p,index) in persons":key="index">
{{p.name}}--{{p.age}}
<input type="text">
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'張三',age:'18'},
{id:'002',name:'里嘶',age:'12'},
{id:'003',name:'王五',age:'19'},
],
},
methods:{
add(){
const p = {id:'004',name:'馬龍',age:'30'}
this.persons.unshift(p)
}
}
})
</script>
</body>添加前：
?添加后：順序亂了
?總結：
文章來源：http://www.zghlxwxcb.cn/news/detail-591170.html
?
到了這里，關于Vue列表渲染（v-for）以及key的作用與原理的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
![[vue]v-for循環(huán)出的列表如何實現每一項單獨展開收起](https://imgs.yssmx.com/Uploads/2024/02/532088-1.png)
