這篇文章寫的是 v-for 用于數組和對象的用法。
一、v-for 和數組
1. v-for="item in items" 傳回數組元素
<div id="app">
<div v-for="item in items">{{item.firstName}}</div>
</div>
<script>
var arr=new Vue({
el:"#app",
data:{
items:[
{firstName:"zheng"},
{firstName:"wang"}
]
}
})
</script>
var arr=new Vue({
el:"#app",
data:{
items:[
{firstName:"zheng"},
{firstName:"wang"}
]
}
})
固定文法：v-for="item in items"，items是源資料數組并且 item 是數組元素疊代的别名。
網頁效果：渲染的結果是 firstName 這個數組的元素
2. v-for="(item, index) in items" 傳回數組元素和索引值
<div id="app">
<div v-for="(item,index) in items">{{index}}-{{item.firstName}}</div>
</div>
<script>
var arr=new Vue({
el:"#app",
data:{
items:[
{firstName:"zheng"},
{firstName:"wang"}
]
}
})
</script>
網頁效果：可通過 {{index}} 擷取目前元素索引值
二、 v-for 和對象
1. 傳回 值 v-for="value in object"
2. 傳回 鍵、值 v-for="(value, key) in object"
3.傳回 鍵、值、索引 v-for="(value, key, index) in object"
<div id="div" >
<p v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</p>
</div>
<script>
var ling=new Vue({
el:'#div',
data: {
object: {
firstName: 'zheng',
lastName: 'zeling',
age: 26
}
}
})
</script>
<div id="div" >
<p v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</p>
</div>
var ling=new Vue({
el:'#div',
data: {
object: {
firstName: 'zheng',
lastName: 'zeling',
age: 26
}
}
})
渲染效果：