v-for可以基于源數(shù)據(jù)多次渲染元素或模板塊乎婿。這個指令必須用特定的語法alias in expression，為當前遍歷的元素提供別名:
<div v-for="alias in expression"> {{ alias }}</div>
一般都是給數(shù)組或?qū)ο笾付▌e名房维，除此之外還可以為索引值指定別名驮配，對于對象還可以給value指定別名，常見的幾種情形如下：
<div v-for="item in items">{{ item }}</div>
<div v-for="(item, index) in items">{{ item }} {{ index }}</div>
<div v-for="val in object"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
其中我們也可以把in換成of作為分隔符肺素，因為它是最接近JavaScript迭代器的語法。
v-for的默認行為試著不改變整體宇驾，而是替換元素倍靡。迫使其重新排序的元素，你需要提供一個key的特殊屬性：
<div v-for="itme in items" :key="item.id"> {{ item.text }}</div>
v-for`的一些使用場景课舍。
操作array
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷數(shù)組</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item) in arr ">{{item}}</li>
</ul>
</div>
</body>
<script>
//view model\
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
});
</script>
</html>
image.png
也可以取索引
<li v-for="(item,index) in arr ">{{item}}={{index}}</li>
image.png
操作對象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷對象</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(key,value) in product ">{{value}}={{key}}</li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
product:{
id:1,
name:"筆記本電腦",
price:5000
}
}
});
</script>
</html>
image.png
操作對象數(shù)組
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷對象</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序號</td>
<td>編號</td>
<td>名稱</td>
<td>價格</td>
</tr>
<tr v-for="(product,index) in products">
<td>{{index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el: "#app",
data: {
products:[
{id: 1, name: "筆記本電腦", price: 5000},
{id: 2, name: "手機", price: 3000},
{id: 3, name: "電視", price: 4000}
]
}
});
</script>
</html>
image.png
