//html
<div id="app">
 <p v-for="item in list">{{item}}</p>
 <p v-for="(item, i) in list">索引{{i}}---值{{item}}</p>
 <p v-for="user in list2">id是{{user.id}}---名字是{{user.name}} </p>
 <p v-for="(user,i) in list2">id是{{user.id}}---名字是{{user.name}}---索引是{{i}}</p>
 //遍历对象身上的属性和值,除了有key value 在第三个位置上还有一个索引
 <p v-for="(key,value,i) in user">键是{{key}}---值是{{value}}---索引是{{i}}</p>
 
 //迭代数字 迭代从1开始
<p v-for="count in 10">这是第{{count}}次循环</p>
</div> //script
<script>
  var vm = new Vue({
    el:'app',
    data:{
      list:[1,2,3,4,5,6,7],
      list2:[
        { id:1, name:'小白' },
        { id:2, name:'小黑' },
        { id:3, name:'小黄' }
      ],
      user:{
        id:1,
        name:'小红',
        gender:'女'
      }
    },
    methods:{//methods中定义了当前vue实例中所有可用的方法
     
    }
  })
</script>

vue学习(十) v-for循环普通数组 、对象数组、 迭代数字的更多相关文章

  1. JS对象 Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的

    Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个"下标",用来表示它在数组中的位置,是从零开始的 数组定义的方法: 1. 定 ...

  2. javascript数组/对象数组的深浅拷贝问题

    一.问题描述 在项目里的一个报名页面需要勾选两条信息(信息一和信息二),由于信息一和信息二所拥有的数据是一致的,所以后台只返回了一个对象数组,然后在前台设置了两个List数组来接收并加以区分.原型如下 ...

  3. vue学习(十四) 条件搜索框动态查询表中数据 数组的新方法

    //html <div id="app"> <label> 名称搜索关键字: <input type="text" clasa=& ...

  4. vue学习(十九) 生命周期 了解

    生命周期:从vue实例创建.运行.到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期 生命周期钩子:就是生命周期事件的别名而已 生命周期钩子==生命周期函数==生命周期事件 生命周期函数分类 ...

  5. vue学习(十八)使用自定义指令 为字体渲染颜色

    <div id="app"> //v-color 是自定义的 <input type="text" class="form-cont ...

  6. vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串

    <div id="app"> <p>{{data | formatStr('yyyy-MM-dd')}}</p></div> //s ...

  7. vue学习(十五) 过滤器简单实用

    vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式   v-bind表达式  由管道符指示 //过滤器调用时候的格式 {{ name ...

  8. vue学习(十二) 指令v-if v-show 控制页面标签的显示与隐藏

    //html <div id="app"> <input type="button" value="toggle" @cl ...

  9. java对象数组的概述和使用

    1 public class Student 2 { 3 // 成员变量 4 private String name; 5 private int age; 6 7 // 构造方法 8 public ...

随机推荐

  1. 如何用Tesseract做日文OCR(c#实现)

    首先做一下背景介绍,Tesseract是一个开源的OCR组件,主要针对的是打印体的文字识别,对手写的文字识别能力较差,支持多国语言(中文.英文.日文.韩文等).是开源世界里最强的一款OCR组件.当然和 ...

  2. Springboot--元注解及自定义注解(表单验证)

    本文简单说明一下元注解,然后对元注解中的@Retention做深入的讨论,在文章最后使用元注解写一个自定义注解来结尾. 一.结论: @Target:注解的作用目标 @Target(ElementTyp ...

  3. 双缓冲显示字幕(卡拉ok字幕)

    思路: 1.设置定时器SetTime,在Ontime()里面确定显示矩形的大小,让后用DrawText把字铁道矩形上面: 2. int nTextHei = dc.GetTextExtent( m_s ...

  4. LeetCode54. 螺旋矩阵

    题意是,输入一个二维数组,从数组左上角开始,沿着顺时针慢慢地"遍历"每一个元素且每一个元素只遍历一次, 在一个新的一维数组中记录遍历的顺序,最终的返回值就是这个数组. 思路:可以考 ...

  5. Java项目开启远程调试(tomcat、springboot)

    当我们运行一个项目的时候,一般都是在本地进行debug.但是如果是一个分布式的微服务,这时候我们选择远程debug是我们开发的利器. 环境apache-tomcat-8.5.16 Linux 如何启用 ...

  6. 11. RobotFramework内置库-Collections

    Collections库是RobotFramework用来处理列表和字典的库,详细可参见官方介绍. 官方地址:http://robotframework.org/robotframework/late ...

  7. JVM源码分析之Object.wait/notify实现

    ​ “365篇原创计划”第十一篇.   今天呢!灯塔君跟大家讲:   JVM源码分析之Object.wait/notify实现       最简单的东西,往往包含了最复杂的实现,因为需要为上层的存在提 ...

  8. centos7 安装部署 Jenkins

    Jenkins 安装部署 1. 安装资源下载 Jenkin镜像地址: http://mirrors.jenkins-ci.org/status.html 选择清华大学镜像地址下载rpm https:/ ...

  9. 数据可视化实例(八): 边缘直方图(matplotlib,pandas)

    https://datawhalechina.github.io/pms50/#/chapter6/chapter6 边缘直方图 (Marginal Histogram) 边缘直方图具有沿 X 和 Y ...

  10. 数据可视化之PowerQuery篇(十六)使用Power BI进行流失客户分析

    https://zhuanlan.zhihu.com/p/73358029 为了提升销量,在不断吸引新客户的同时,还要防止老客户离你而去,但每一个顾客不可能永远是你的客户,不可避免的都会经历新客户.活 ...