关于指令 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值,第三位是索引值

 

posted @ 2018-01-08 19:24  浅夏、  阅读(319)  评论(0编辑  收藏  举报