循环使用 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. 机器学习-TensorFlow应用之 binned features, Cross features和optimizer

    概述 这一节主要介绍一下TensorFlow在应用的过程中的几个小的知识点,第一个是关于features的处理的,例如Bucketized (Binned) Features 和 Feature sc ...

  2. 关于Xen

    尝试了各种方法搭建xen,尝试过从xenserver入手,但似乎最近时间端不允许访问,感谢我的老师,叫我从kvm入手,暂时记下xen中种种的坑,以后有缘再战.欢迎交流

  3. Python中随机数的生成

    在Python中要实现随机数的生成,需要使用random模块中randint方法. 其具体实现方法如下: import random a = random.randint(1,20) #(1,20)为 ...

  4. 图像处理:AlphaBlend混合两张图片

    使用vs2017新建一个项目 混合A,B两张图的基础算法: outColor = srcColor * srcAlpha + destColor * (1 - srcAlpha) 输出颜色 = 源颜色 ...

  5. Mybatis框架配置讲解以及使用

    1.什么是Mybatis MyBatis 是一款优秀的持久层框架, 它支持定制化 SQL.存储过程以及高级映射. MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.·MyB ...

  6. vuex之getter(二)

    说明 使用vue,如果想对data数据派生一些状态,我们就用到计算属性或者侦听器,同样vux想要派生state中的一些状态,可以在store中定义一个getters属性,它相当于state的计算属性. ...

  7. 一、Django学习之连接与建立数据库

    连接MySQL数据库 配置文件 找到DATABASES对应的设置,修改为MySQL的配置即可 DATABASES = { 'default': { 'ENGINE': 'django.db.backe ...

  8. 微信小程序框架分析小练手（三）——仿香哈菜谱小程序制作

    香哈菜谱是一款围绕美食而成的小程序,在这里可以查看各式各样的菜谱. 一.打开微信开发者工具,新建一个项目:xhcp.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标.美食轮播图片.宫格导航图 ...

  9. 十二、sed文本处理

    一.概述 1.sed 是一款流编辑工具,用来对文本进行过滤与替换工作,特别是当你想要对几十个配置文件做统计修改时,你会感受到 sed 的魅力!sed 通过输入读取文件内容,但一次仅读取一行内容进行某些 ...

  10. 红帽RedHat 8.0新特性(网络、yum源、Web界面管理等)

    1.Red Hat8 配置静态IP 注意:Red Hat8网络管理默认使用NetworkManager,而不是之前版本的network. 按照之前版本我们一般通过配置文件设置静态IP地址信息,如下: ...