?1.v-for遍歷普通數(shù)組
in前面如果是一個變量，那么該變量保存的是數(shù)組中的數(shù)據(jù)in前面如果是兩個變量，那么第一個變量保存的是數(shù)組中的數(shù)據(jù)，第二個變量保存的是下標
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 綁定事件 v-on: 簡寫為@ -->
<button @click="add">點擊在數(shù)組最后添加元素</button>
<ul style="list-style-type: none;">
<!-- item是數(shù)組里面的元素 index是數(shù)組的下標 -->
<li v-for="(item,index) in list">{{index}}-{{item}}</li>
</ul>
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
list: ['豬方', '戰(zhàn)神', '小金子', '楠神']
},
methods: {
add() {
this.list.push('黑牛')
}
},
})
</script>
</body>
</html>2.v-for遍歷對象
如果是一個變量，那么保存的是對象中的屬性值
如果是兩個變量，那么第一個變量保存的是屬性值，第二個變量保存的是屬性名
如果是三個變量，那么第一個變量保存的是屬性值，第二個變量保存的是屬性名，第三個變量保存的是下標
v-for="o1 in obj" ? ? ? ? ?o1:屬性值
v-for="(o1,o2) in obj" ? ? o1:屬性值 ?o2:屬性名
v-for="(o1,o2,o3) in obj" ?o1:屬性值 ?o2:屬性名 ?o3:下標
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in obj">{{item}}</li>
<hr>
<li v-for="(val,key) in obj">{{ key }}-{{ val }}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
obj: {
name: '卡拉米',
age: 16,
sex: '男',
}
}
})
</script>
</body>
</html>3.v-for循環(huán)數(shù)字
in后面不僅可以放數(shù)組、對象數(shù)組、對象，還可以放數(shù)字
在in前面用一個變量存儲當前次數(shù)，注意：此變量是從1開始，而不是從0開始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul style="list-style-type: none;">
<!-- v-for='遍歷的數(shù) in 遍歷的范圍' -->
<li v-for="num in 9">{{num}}</li>
</ul>
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
</body>
</html>4. Key是什么？
Key 特殊屬性主要用做 Vue 的虛擬 DOM 算法在將新節(jié)點列表與舊列表進行比較時識別 VNode 的提示。在沒有鍵的情況下，Vue 使用一種算法來最小化元素移動，并嘗試盡可能多地就地修補/重用相同類型的元素。使用鍵，它將根據(jù)鍵的順序更改對元素進行重新排序，并且不再存在鍵的元素將始終被刪除/銷毀。
?5.有無Key值不同調(diào)用方法
Vue內(nèi)部會對有無Key值的for循環(huán)進行不同方法的處理
（1） patchKeyedChildren
有 Key， 進行 patchKeyedChildren文章來源：http://www.zghlxwxcb.cn/news/detail-796669.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- @click="list.splice(下標,刪除的數(shù)量,添加的元素)" -->
<button @click="list.splice(1,0,{name:'狗屎',age:11,sex:'男',id:4})">點擊添加對象</button>
<ul>
<li v-for="item in list" :key="item.id">
<!-- 單選框 -->
<input type="checkbox">
<!-- 行內(nèi)元素 -->
<span>{{item.name}}</span>
</li>
</ul>
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
list:[
{name:'戰(zhàn)神',age:18,sex:'男',id:1},
{name:'金子',age:18,sex:'男',id:2},
{name:'銅牌',age:18,sex:'男',id:3}
]
}
})
</script>
</body>
</html>（2）patchUnKeyedChildren
沒有 Key ，進行 patchUnKeyedChildren文章來源地址http://www.zghlxwxcb.cn/news/detail-796669.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- @click="list.splice(下標,刪除的數(shù)量,添加的元素)" -->
<button @click="list.splice(1,0,{name:'狗屎',age:11,sex:'男',id:4})">點擊添加對象</button>
<ul>
<li v-for="item in list">
<!-- 單選框 -->
<input type="checkbox">
<!-- 行內(nèi)元素 -->
<span>{{item.name}}</span>
</li>
</ul>
</div>
<script src="/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
list:[
{name:'戰(zhàn)神',age:18,sex:'男',id:1},
{name:'金子',age:18,sex:'男',id:2},
{name:'銅牌',age:18,sex:'男',id:3}
]
}
})
</script>
</body>
</html>到了這里，關于vue中的v-for循環(huán)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
![[vue]v-for循環(huán)出的列表如何實現(xiàn)每一項單獨展開收起](https://imgs.yssmx.com/Uploads/2024/02/532088-1.png)
