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

分类 记录 547阅读阅读模式

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

 

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

 

 

 

共 674字 © 本文由 大朗 撰写，转载请注明出处。

本文由大朗编写，如有错漏或其他不当，请在下方留言，欢迎指正。

永久固定短链接地址：https://www.darlang.com/?p=309 复制链接

赞 0

相关文章

给我留言

  • 有人回复时邮件通知我
© 2019 DarLang.com 粤ICP备15047962号 粤公网安备 44010602006221号 Powered by DarLang