Vue 数组循环调用 – 多个数组循环

当前位置: 首页 » 记录 » Vue 数组循环调用 – 多个数组循环

分类: 记录 712阅读阅读模式

对于数组循环调用,多个数组循环,而调用数组的字段时,如图

 

HTML 部分默认的写法,会调出 [object,object]

  1. <ul>
  2. <li v-for="item in items">{{item}}</li>
  3. </ul>

输出:

  1. [object Object]
  2. [object Object]
  3. [object Object]
  4. [object Object]
  5. [object Object]
  6. [object Object]
  7. [object Object]
  8. [object Object]
  9. [object Object]
  10. [object Object]

 

需要改为数组内字段名连接 item ,即可循环当前字段值。

 

例子,改为 word 连接,即循环出 word 的字段值

  1. <ul>
  2. <li v-for="item in items">{{item.word}}</li>
  3. </ul>

输出:

  1. 爱奇艺
  2. 阿里巴巴批发网
  3. 阿里巴巴
  4. acfun
  5. a站
  6. angelababy
  7. a直播
  8. 爱情保卫战
  9. 安全教育平台
  10. a4yy

 

参考资料:

https://segmentfault.com/q/1010000008656374

https://segmentfault.com/q/1010000007557081

https://segmentfault.com/q/1010000004176755

https://segmentfault.com/q/1010000010305605

http://www.cnblogs.com/zhoujx1066/p/6590925.html

http://www.jscss.cc/2016/10/23/vue-for.html

 

 

 

相关文章