Vue循环

举个例子

v-for之类是关于循环的。然后值是xx in xx。

循环读取数组里的值

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

结果如图

image.png

再比如

<div id="app">
<ul>
    <li v-for="num in list">{{num}}</li>
</ul>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            list:[1,2,3]
        }
    })

</script>

结果

image.png

遍历整数

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

<script>
new Vue({
    el:'#app'
})

结果

image.png

遍历对象

value in xx中,value是关键字,不能变的。

<div id="app">
  <ul>
    <li v-for="value in xx">
    {{ value }}
    </li>
  </ul>
</div>
​
<script>
new Vue({
  el: '#app',
  data: {
    xx: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术,更是梦想!'
    }
  }
})

结果

image.png

参考

Vue.js 循环语句 | 菜鸟教程

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 13,804评论 4 129
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,479评论 0 29
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 33,367评论 18 399
  • 从三月份找实习到现在,面了一些公司,挂了不少,但最终还是拿到小米、百度、阿里、京东、新浪、CVTE、乐视家的研发岗...
    时芥蓝阅读 42,498评论 11 349
  • 固态、液态、气态三态的相互转化是初中物理的学习内容。 今天不聊物理,我们聊人生。 是否有经历过这样的阶段: 苦苦的...
    豌豆公主郭阅读 3,978评论 0 1

友情链接更多精彩内容