v-for可以基于源数据多次渲染元素或模板块。这个指令必须用特定的语法alias in expression，为当前遍历的元素提供别名:
<div v-for="alias in expression"> {{ alias }}</div>
一般都是给数组或对象指定别名，除此之外还可以为索引值指定别名，对于对象还可以给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遍历数组</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
操作对象数组
<!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
网友评论