//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. Python 简明教程 --- 5,Python 表达式与运算符

    微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 靠代码行数来衡量开发进度,就像是凭重量来衡量飞机制造的进度. -- Bill Gates 目录 1, ...

  2. 千金良方说:"我现在奉上179341字的MySQL资料包,还来得及吗?有"代码段、附录、和高清图!!"

    上一篇"上发布过"一不小心,我就上传了 279674 字的 MySQL 学习资料到 github 上了",我在更早之前,在微信公众号"老叶茶馆"上发布 ...

  3. 入门大数据---Hive常用DML操作

    Hive 常用DML操作 一.加载文件数据到表 1.1 语法 LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename ...

  4. Jenkins 主题:jenkins-theme-v2

    说明 本次样式是基于 Jenkins ver. 2.235.1 写的,所有对于之前的版本可能样式不兼容,好像变化挺大的.个人测试了在用的 Jenkins ver. 2.190.1,完全不行,所有建议想 ...

  5. js写一个简单的九九乘法表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 「疫期集训day0」启程

    看了看几乎所有学长都是写的博客,所以写的博客 由于是第一回集训,考得都是老题(虽然有些还不会) 感受1:我调试好蒻呃,调试巨蒻,T1lis模板5分切,结果T2T3T4调了将近了两个小时,先是T2路径输 ...

  7. 分享一个集成.NET Core+Swagger+Consul+Polly+Ocelot+IdentityServer4+Exceptionless+Apollo+SkyWalking的微服务开发框架

    集成.NET Core+Swagger+Consul+Polly+Ocelot+IdentityServer4+Exceptionless+Apollo的微服务开发框架 Github源代码地址 htt ...

  8. 邓布利多拍了拍你,并递来一份CSS魔法

    校长:阿不思·邓布bai利多 亲爱的少年:我们愉快地通知您,您已获准在CSS魔法学校就读.特此带给你一份CSS魔法秘籍,代码简单,支持个性化定制.学期定于今日开始,我们将在此静候您的猫头鹰带来您的回信 ...

  9. day59 pip安装django出错解决方案

    在虚拟环境下,输入 pipinstall django ==2.2,安装django,可能会出现超时问题 ​ 这里的报错是网络问题,解决方案有如下三种 (1)多试几次,网络好就装上了 (2)Cmd输入 ...

  10. Java 添加条码、二维码到Word文档

    本文介绍如何在Word文档中添加条码.二维码.可在文档正文段落中添加,也可在页眉页脚中添加.下面将通过Java代码示例介绍如何实现. 使用工具:Free Spire.Office for Java(免 ...