v-for 返回陣列元素/ 返回物件的(鍵/值)
阿新 • • 發佈:2018-12-12
這篇文章寫的是 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 } } })