以下是我自己的理解
第一種情況:數(shù)據(jù)是json格式
HTML:
<ul>
<li v-for="(item,index) in items"><!-- 這里可以使用in 也可以使用of -->
<p>姓名:{{item.name}}</p>
<p>年齡:{{item.age}}</p>
<p>這是第幾個(gè):{{index}}</p>
</li>
</ul>
Js
data () {
return {
items:[{"name":"張三","age":"18"},
{"name":"李四","age":"17"},
{"name":"王五","age":"19"}]
}
}
輸出結(jié)果
姓名:張三
年齡:18
這是第幾個(gè):0
姓名:李四
年齡:17
這是第幾個(gè):1
姓名:王五
年齡:19
這是第幾個(gè):2
第二種情況:數(shù)據(jù)是數(shù)組
HTML:
<ul>
<li v-for="(value,key) in items">
<p>內(nèi)容:{{value}}key:{{key}}</p>
</li>
</ul>
JS:
data () {
return {
items:[1,2,3,4,5,7]
}
}
輸出結(jié)果
內(nèi)容:1key:0
內(nèi)容:2key:1
內(nèi)容:3key:2
內(nèi)容:4key:3
內(nèi)容:5key:4
內(nèi)容:7key:5
第三種情況:數(shù)據(jù)是{"key":"value"}
HTML:
<ul>
<li v-for="(value,key,index) in items">
<p>value:{{value}}</p>
<p>key:{{key}}</p>
<p>index:{{index}}</p>
</li>
</ul>
JS:
data () {
return {
items:{"a":"3","b":"1","c":"2","d":"4"}
}
}
輸出結(jié)果:
value:3
key:a
index:0
value:1
key:b
index:1
value:2
key:c
index:2
value:4
key:d
index:3
