以下是我自己的理解
第一种情况:数据是json格式
HTML:
<ul>
<li v-for="(item,index) in items"><!-- 这里可以使用in 也可以使用of -->
<p>姓名:{{item.name}}</p>
<p>年龄:{{item.age}}</p>
<p>这是第几个:{{index}}</p>
</li>
</ul>
Js
data () {
return {
items:[{"name":"张三","age":"18"},
{"name":"李四","age":"17"},
{"name":"王五","age":"19"}]
}
}
输出结果
姓名:张三
年龄:18
这是第几个:0
姓名:李四
年龄:17
这是第几个:1
姓名:王五
年龄:19
这是第几个:2
第二种情况:数据是数组
HTML:
<ul>
<li v-for="(value,key) in items">
<p>内容:{{value}}key:{{key}}</p>
</li>
</ul>
JS:
data () {
return {
items:[1,2,3,4,5,7]
}
}
输出结果
内容:1key:0
内容:2key:1
内容:3key:2
内容:4key:3
内容:5key:4
内容:7key:5
第三种情况:数据是{"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"}
}
}
输出结果:
value:3
key:a
index:0
value:1
key:b
index:1
value:2
key:c
index:2
value:4
key:d
index:3
