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

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

分类： 记录 2467阅读阅读模式

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

 

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

 

 

 

提示：回复可见的文章，回复评论成功后，需要刷新页面才能看到被隐藏的内容！
最后更新：2018年4月13日 永久固定短链接地址：
本文由大朗编写，如有错漏或其他不当，请在下方留言，欢迎指正。

相关文章

评论已关闭。