//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. 网络虚拟化之linux虚拟网络基础

    1 linux虚拟网络基础 1.1 Device 在linux里面devic(设备)与传统网络概念里的物理设备(如交换机.路由器)不同,Linux所说的设备,其背后指的是一个类似于数据结构.内核模块或 ...

  2. swift对象存储安装

    对象存储服务概览 OpenStack对象存储是一个多租户的对象存储系统,它支持大规模扩展,可以以低成本来管理大型的非结构化数据,通过RESTful HTTP 应用程序接口. 它包含下列组件: 代理服务 ...

  3. day19__生成器,迭代器

    一.列表解析 l1 = ['鸡蛋%s' % i for i in range(10) if i > 5] print(l1) # ['鸡蛋6', '鸡蛋7', '鸡蛋8', '鸡蛋9'] 这种方 ...

  4. MongoDB快速入门教程 (4.2)

    4.2.Mongoose实现增删查改 中文文档地址: https://cn.mongoosedoc.top/docs/guide.html 4.2.1.Mongoose是什么? Mongoose是Mo ...

  5. ES11来了,还学得动吗?

    写在前面 ES2020(即 ES11)上周(2020 年 6 月)已经正式发布,在此之前进入 Stage 4 的 10 项提案均已纳入规范,成为 JavaScript 语言的新特性 一.特性一览 ES ...

  6. RSS阅读器推荐

    http://www.feeddemon.com/ Windows,Free (完)

  7. java语言进阶(一)_Object类_常用API

    第一章 Object类 1.1 概述 java.lang.Object类是Java语言中的根类,即所有类的父类.它中描述的所有方法子类都可以使用.在对象实例化的时候,最终找的父类就是Object. 如 ...

  8. 解决autocomplete=off在Chrome中不起作用的方法

    大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为&q ...

  9. Netty 中的内存分配浅析-数据容器

    本篇接续前一篇继续讲 Netty 中的内存分配.上一篇 先简单做一下回顾: Netty 为了更高效的管理内存,自己实现了一套内存管理的逻辑,借鉴 jemalloc 的思想实现了一套池化内存管理的思路: ...

  10. Python——查看目录下所有的目录和文件

    写程序我们经常会遇到需要遍历某一个目录下的所有文件这个操作,然而python有现成的库,只需要2个循环就可以搞定. import os def all_path(dirname): result = ...