v-for：根據(jù)數(shù)據(jù)生成列表結構，并且是響應式的，可以十分便捷的操作列表結構了。
至于是什么樣的列表，就看你指令使用的位置了，列表的生成依賴于數(shù)據(jù)，所以先去定義數(shù)據(jù)。
它結合的類型挺多的，數(shù)組，對象，迭代器，字符串，最常使用的是數(shù)組。這里使用數(shù)組來演示。
?這里多個的是li標簽，這里就使用v-for指令去生成多個li。如果li中有內容，那么每個生成的標簽就會將內容包含進去。
v-for指令的作用是將作為模板的那個標簽，還有內部的內容，根據(jù)循環(huán)的次數(shù)拷貝若干份。
item的值是可以使用的，item的值可以結合其他指令，比如使用v-bind和v-on指令。
除了數(shù)組的每項數(shù)據(jù)之外，數(shù)組的索引頁也是比較常用的。
?item和index都是可以修改其名稱的。
如果數(shù)組的每一項不是數(shù)字，而是對象或者其他復雜的類型，那么item代表這個對象，要獲取內部的值要結合.語法。如果不使用點語法，那么會將整個對象渲染出來。
v-for還有個特點，比如數(shù)組的長度發(fā)生變化了，比如添加了或者刪除了，那么生成的列表也會發(fā)生改變。
可以看到v-for指令是可以結合v-bind指令的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<ul type="circle">
<li v-for="(item,index) in arr">
number:{{ item }} index:{{ index+1 }}
</li>
<h2 v-for="item in objarr" v-bind:title="item.name">
{{ item }}
</h2>
<h1 v-for="item in objarr">
{{ item.name }}
</h1>
</ul>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
arr:[1,2,3,4],
objarr:[
{
name: "lucas",
id : 1
},
{
name: "jerry",
id: 2
}
]
}
}
}
//掛載到html當中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>
來測試一下數(shù)據(jù)的變更，添加增加數(shù)據(jù)的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<button type="button" @click="add()">add</button>
<button type="button" @click="remove()">remove</button>
<ul type="circle">
<li v-for="(item,index) in arr">
number:{{ item }} index:{{ index+1 }}
</li>
<h2 v-for="item in objarr" v-bind:title="item.name">
{{ item }}
</h2>
<h1 v-for="item in objarr">
{{ item.name }}
</h1>
</ul>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
arr:[1,2,3,4],
objarr:[
{
name: "lucas",
id : 1
},
{
name: "jerry",
id: 2
}
]
}
},
methods:{
add:function(){
this.objarr.push(
{name: "lisa",id: 3}
);
},
remove:function(){
//移除最左邊的元素
this.objarr.shift();
}
}
}
//掛載到html當中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>
?
--------------------------------------------------------------------------------------------------------------------------------
?v-for：就地更新
<!--for循環(huán)時，需要指定屬性是唯一的key -->文章來源：http://www.zghlxwxcb.cn/news/detail-620197.html
<li v-for="(val,index)in myArray2":key="val.id">文章來源地址http://www.zghlxwxcb.cn/news/detail-620197.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首頁</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<ul>
<li v-for="(item,index) in userinfo">
{{item.id}}
<input type="text" :value="item.name" :key="item.id">
<button type="button" @click="remove(index)">刪除</button>
</li>
</ul>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
userinfo:[{id:1,name:"lucas",age:20},{id:2,name:"guanchunyan",age:18},{id:3,name:"jerry",age:30}],
}
},
methods:{
remove:function(index){
this.userinfo.splice(index,1)
}
}
}
//掛載到html當中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>到了這里，關于Vue 常用指令 v-for 列表循環(huán)的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
![FE_Vue學習筆記 條件渲染[v-show v-if] & 列表渲染[v-for] 列表過濾 列表排序](https://imgs.yssmx.com/Uploads/2024/02/446581-1.png)
