循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。

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

<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>

可以提供第二个的参数为键名:

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
      {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      object: {
        name: '菜鸟教程',
        url: 'http://www.runoob.com',
        slogan: '学的不仅是技术,更是梦想!'
       }
     }
  })
</script>

第三个参数为索引:

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
      {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
  new Vue({
  el: '#app',
  data: {
    object: {
    name: '菜鸟教程',
    url: 'http://www.runoob.com',
    slogan: '学的不仅是技术,更是梦想!'
    }
  }
})
</script>

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

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

循环使用 v-for 指令。的更多相关文章

  1. Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  2. v:bind指令对于传boolean值的注意之处

    1,

  3. 汇编语言--微机CPU的指令系统(五)(循环指令)

    (8)循环指令 循环结构是程序的三大结构之一.为了方便构成循环结构,汇编语言提供了多种循环指令,这些循环指令的循环次数都是保存在计数器CX或ECX中.除了CX或ECX可以决定循环是否结束外,有的循环指 ...

  4. angular自定义指令 repeat 循环结束事件;limitTo限制循环长度、限定开始位置

    1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...

  5. Python虚拟机之while循环控制结构(三)

    Python虚拟机中的while循环控制结构 在Python虚拟机之if控制流(一)和Python虚拟机之for循环控制流(二)两个章节中,我们介绍了if和for两个控制结构在Python虚拟机中的实 ...

  6. matlab中for 用来重复指定次数的 for 循环

    参考:https://ww2.mathworks.cn/help/matlab/ref/for.html?searchHighlight=for&s_tid=doc_srchtitle for ...

  7. x01.os.6: 8086 指令

    M:存储器A:累加器R:寄存器SEGR:段寄存器IMM:立即数X:标志位状态依运算或操作结果而定U:相应标志位未定义-:不影响 数据传送指令 时钟数 访问次数 字节数 对标志位影响 指令意义 MOV ...

  8. 学习linux内核时常碰到的汇编指令(1)

     转载:http://blog.sina.com.cn/s/blog_4be6adec01007xvg.html 80X86 汇编指令符号大全 +.-.*./∶算术运算符. &∶宏处理操作符. ...

  9. 序列for循环语句

    序列for循环语句 序列for循环语句允许重复遍历一组序列,而这组序列可以是任何可以重复遍历的序列,如由begin()和end()函数定义的STL序列.所有的标准容器都可用作这种序列,同时它也同样可以 ...

  10. FreeMarker 自己定义指令(三)

    1. 模板文件 test04.ftl foo <@customUpper> bar f <#-- 这里同意使用全部的 FTL --> <#list ["red& ...

随机推荐

  1. Django视图函数函数之视图装饰器

    FBV模式装饰器: 普通函数的装饰器(语法糖@) views.py from django.shortcuts import render def wrapper(f): def inner(*arg ...

  2. python3.x 基础三:set集合

    集合,set(),记住: 1个特点:去重,把列表变成集合,达到自动去重操作,无序 5个关系:测试两个列表的交差并子反向差集 方法: |  add(...) 常用,已存在元素去重不生效 |      A ...

  3. 实验三 Java基本程序设计

    第一部分:理论知识复习部分 第一章:第一章介绍的是Java程序设计的概述,通过两周的Java学习中,重温了Java“白皮书的关键术语,更深一步理解乐11个关键术语. 第二章:本章主要介绍如何安装JDK ...

  4. 为什么说OC是运行时语言?什么是动态类型、动态绑定、动态加载?

    转载:https://www.cnblogs.com/dxb123456/p/5525343.html 动态: 主要是将数据类型的确定由编译时,推迟到了运行时. 这个问题其实浅涉及到两个概念,运行时和 ...

  5. Spring Boot在Docker上的部署

    一.准备工作 1.1 安装Docker环境 Docker 给旧版本的WIN系统提供的是Docker Toolbox下载(https://docs.docker.com/toolbox/overview ...

  6. Create First Application

    Node.js创建第一个应用 Node.js开发的目的就是为了用JavaScript编写Web服务器程序, 在使用Node.js时,不仅仅是在实现一个应用,同时还实现了整个HTTP服务器.在创建Nod ...

  7. WordPress 获取文章内容页特色图像地址

    WordPress获取特色图像地址主要需要用到两个函数get_post_thumbnail_id和wp_get_attachment_image_src.下面是分别获取小.中.大.完整.指定图片规格的 ...

  8. JS 写逻辑判断,不要只知道用 if-else 和 switch

    我们在编写 JS 代码时,经常会遇到逻辑判断复杂的情况.一般情况下,可以用 if/else 或 switch 来实现多个条件判断,但会出现一个问题:随着逻辑复杂度的增加,代码中的 if/else 和 ...

  9. 阿里P9精心编写高并发设计手册,来看大厂是如何进行系统设计

    在看这篇文章的应该都是IT圈的朋友吧,不知道你们有没有考虑过这样几件事: 淘宝双11的剁手狂欢为什么天猫没崩掉? 为什么滴滴打车高峰如何滴滴依旧可以平稳运行? 为什么疫情期间,钉钉能支撑那么多人同时上 ...

  10. [PHP学习教程 - 心得]001.偷龙转凤技巧10则(Remember Tips)

    引言:PHP当中的一些猬锁技巧,比较基础,想起就发贴总结一下,老鸟换个姿势飘过去就是. [技巧]应该属于“方法”的一个范畴,主要指对一种生活或工作方法的熟练和灵活运用.[五笔]RFAG. 话不多说,下 ...