Vue.js常用指令之循环使用v-for指令教程

前端之家收集整理的这篇文章主要介绍了Vue.js常用指令之循环使用v-for指令教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

Vue.js中,v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表:

  • 输出

    模板中使用 v-for:

    效果

    v-for 可以通过一个对象的属性来迭代数据:

  • 效果

    编程之家

    //www.jb51.cc

    美好生活,等待你的开创!

    v-for 通过一个对象的属性来迭代数据,可以提供第二个的参数为键名:

  • 效果

    name : 编程之家

    url : //www.jb51.cc

    slogan : 美好生活,等待你的开创!

    v-for 通过一个对象的属性来迭代数据,以第三个参数为索引:

  • 效果

    0 name:编程之家

    1 url://www.jb51.cc

    2 slogan:美好生活,等待你的开创!

    v-for 也可以循环整数

    • {{ n }}

    效果

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

    原文链接:/vue/38310.html
    forvuejs

    猜你在找的Vue相关文章