循环使用 v-for 指令。

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

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

<script>
  new Vue({
    el: '#demo',
    data: {
      sites:[
        {name:"cyy1"},
        {name:"cyy2"},
        {name:"cyy3"}
      ]
    },
    methods:{

    },
    filters:{//过滤器

    }
  })
</script>

模板中使用 v-for：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <ul>
    <template v-for="site in sites">
      <li>{{site.name}}</li>
      <li>-----------</li>
    </template>
  </ul>
</div>

<script>
  new Vue({
    el: '#demo',
    data: {
      sites:[
        {name:"cyy1"},
        {name:"cyy2"},
        {name:"cyy3"}
      ]
    },
    methods:{

    },
    filters:{//过滤器

    }
  })
</script>

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <ul>
      <li v-for="obj in object">
        {{obj}}
      </li>
  </ul>
</div>

<script>
  new Vue({
    el: '#demo',
    data: {
      object:{
        name:"cyy1",
        age:25,
        sex:"girl"
      }
    },
    methods:{

    },
    filters:{//过滤器

    }
  })
</script>

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

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

<script>
  new Vue({
    el: '#demo',
    data: {
      object:{
        name:"cyy1",
        age:25,
        sex:"girl"
      }
    },
    methods:{

    },
    filters:{//过滤器

    }
  })
</script>

第三个参数为索引：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

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

<script>
  new Vue({
    el: '#demo',
    data: {
      object:{
        name:"cyy1",
        age:25,
        sex:"girl"
      }
    },
    methods:{

    },
    filters:{//过滤器

    }
  })
</script>

v-for 也可以循环整数

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

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

<script>
  new Vue({
    el: '#demo',
    data: {

    },
    methods:{

    },
    filters:{//过滤器

    }
  })
</script>

vue循环语句的更多相关文章

  1. Vue.js：循环语句

    ylbtech-Vue.js:循环语句 1.返回顶部 1. 循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 ...

  2. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  3. vue.js循环语句

    vue.js循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组, site 是数组元素迭代的别名. v-for 可以 ...

  4. 第十篇:vue.js for循环语句(大作业进行时)

    Vue.js 循环语句 <div id="app"> <ol> <li v-for="site in sites"> /*f ...

  5. 【python之路4】循环语句之while

    1.while 循环语句 #!/usr/bin/env python # -*- coding:utf-8 -*- import time bol = True while bol: print '1 ...

  6. python之最强王者（3）——变量，条件、循环语句

    1.Python 变量类型 变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间. 基于变量的数据类型,解释器会分配指定内存,并决定什么数据可以被存储在内存中. 因此,变量可以指定不同的 ...

  7. #9.5课堂JS总结#循环语句、函数

    一.循环语句 1.for循环 下面是 for 循环的语法: for (语句 1; 语句 2; 语句 3) { 被执行的代码块 } 语句 1 在循环(代码块)开始前执行 语句 2 定义运行循环(代码块) ...

  8. 详解Python中的循环语句的用法

    一.简介 Python的条件和循环语句,决定了程序的控制流程,体现结构的多样性.须重要理解,if.while.for以及与它们相搭配的 else. elif.break.continue和pass语句 ...

  9. 【java开发】分支语句、循环语句学习

    一.Java分支语句类型 if-else 语句 switch 关于if-esle语句可以拆分为三种 if语句 if(条件){语句块;} if-else语句if(条件语句){语句块;} if-else ...

随机推荐

  1. java小心机(3)| 浅析finalize()

    每天进步一丢丢,连接梦与想 如果你停止就是谷底,如果你还在努力就是上坡 系列文章 java"小心机"(1)[资源彩蛋!] java小心机(2)| 重载和构造器的小细节 预备知识 J ...

  2. 51Nod 2026 Gcd and Lcm

    题目传送门 分析: 开始玩一个小小的trick 我们发现\(f(n)=\sum_{d|n}\mu(d)\cdot d\)是一个积性函数 所以: \(~~~~f(n)=\prod f(p_i^{a_i} ...

  3. 利用Python进行博客图片压缩

    自己写博客的时候常常要插入一些手机拍的照片,都是几M的大小,每张手动压缩太费事了,于是根据自己博客的排版特点用Python写了一个简单的图片压缩脚本,功能是将博客图片生成缩略图,横屏的图片压缩为宽度最 ...

  4. 工具 之uniq

    uniq命令的作用:显示唯一的行,对于那些连续重复的行只显示一次!接下来通过实践实例说明. [关键字] Linux Shell uniq 看test.txt文件的内容,可以看到其中的连续重复行 [ro ...

  5. 自学前端开发，现在手握大厂offer，我的故事还在继续

    简要背景 我是一个非科班出身的程序员,而且是连续跨专业者,用一句话总结就是:16 届本科学完物流,保送研究生转交通,自学前端开发的休学创业者. 17 年休学创业,正式开始学习前端,离开创业公司后,我又 ...

  6. laravel 工厂模式到容器

    下面实现了查人拥有超能力的三种方式 第一种最基本的类引用实现 1 <?php /** * 目的:代码的完善来说明从 基础类的调用到 工厂类的使用 再到容器的出现的原因 * (首先要明白工厂类和容 ...

  7. jQuery使用ajax向node后台发送对象、数组参数

    引言 最近在使用jq,做一些小demo,但是突然发现jq使用ajax像后台(node)传递一个对象参数,但是后台却接收不了. 原因 后面了解到.jq会将一个对象解析成obj[key]: value这样 ...

  8. 解决docker容器无网络、无法连接互联网----长期更新

    众所周知,docker有三种默认的网络模式,分别是: bridge host none 然后需要注意的就是内核转发这个,一定不要忘了!配置方法如下 echo -e "net.ipv4.ip_ ...

  9. 【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建

    Web可视化开发是阿里云IoT Studio中比较重要的一个功能,通过可视化拖拽的方式,方便地将各种图表组件与设备相关的数据源关联,无需编程,即可将物联网平台上接入的设备数据可视化展现. 目前支持的组 ...

  10. 使用npm发布、查看、引用、删除自己的包[小白推荐]

    前言  怎么使用npm发布自己的组件包呢?博主看了不少相关的文章,都没有一个好的讲述.要么丢三落四,要么就是复杂到外行人根本看不懂,甚至无从下手.于是,在博主的潜心钻研下,终于成功了!所以,我打算写一 ...