关于指令 v-for 遍历

<div id="test">
　　<div>{{ arr}}</div>
　　<div>{{ list}}</div>
</div>

var vue=new Vue({
　　el:"#test",
　　data:{
　　　　arr:["a","b","c"],
　　　　list:{
　　　　　　"百度":"https://www.baidu.com/",
　　　　　　"百度":"https://www.baidu.com/",
　　　　　　"百度":"https://www.baidu.com/",
　　　　}
　　}
});

输出结果：

数组遍历：

1.只输出value

　　<div id="test"><div v-for = "v in arr">{{v}}</div></div>  

2.输出value和下标索引

　　<div id="test"><div v-for = "(v,i) in arr">{{index}}{{v}}</div></div>

json遍历：

1.只输出value

<div id="test"><div v-for = "v in list">{{v}}</div></div>  

2.输出key,value

　　<div id="test"><div v-for = "(v,k) in list">{{k}}{{v}}</div></div>

2.输出key,value,index

　　<div id="test"><div v-for = "(v,k,i) in list">{{i}}{{k}}{{v}}</div></div>

 

区别：数组中，括号里的参数第一位是value值，第二位是索引值

　　   json中，第一位是value值，第二位是key值，第三位是索引值

 

转载于:https://www.cnblogs.com/txhy/p/8244520.html