如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="vue.js"></script>

</head>

<body>

    <!--容器-->

    <div id="app">

        <!--循环数组-->

       <span v-for="(u,i) in user">|||{{u}}--索引{{i}}|||</span>

        <!--循环对象数组--><br>

        <span v-for="(u,i) in object">---{{u.a}}---索引：{{i}}</span>

        <!--循环对象--><br>

        <span v-for="(val,key,i) in app">---值：{{val}}---键{{key}}----索引：{{i}}</span>

        <!--循环数字--><br>

        <span v-for="count in 10">{{count}}</span>

    </div>

<script>

    // 创建一个vue实例

    var vm=new Vue({

        el:'#app',  // 绑定id为appid容器

        data:{

            user:[1,2,3,4,5],

            object:[

                {"a":1},

                {"a":2},

                {"a":3}

            ],

            app:{

                "a":1,

                "b":2,

                "c":3

            }

        }

    })

</script>

</body>

</html>

效果：效果有点丑，见谅

　　

vue的v-for循环普通数组、对象数组、对象、数字的更多相关文章

  1. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  2. JavaScript基础精华03(String对象,Array对象,循环遍历数组,JS中的Dictionary,Array的简化声明)

    String对象(*) length属性:获取字符串的字符个数.(无论中文字符还是英文字符都算1个字符.) charAt(index)方法:获取指定索引位置的字符.(索引从0开始) indexOf(‘ ...

  3. 关于 vue 不能 watch 数组变化 和 对象变化的解决方案

    原文地址:关于 vue 不能 watch 数组变化 和 对象变化的解决方案 vue 监听数组和对象的变化 vue 监听数组 vue 实际上可以监听数组变化,比如: data () { return { ...

  4. vue中，对象数组多层嵌套时，更新数据更新页面

    vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...

  5. 对象数组和for循环遍历输出学生的信息

    public class Student { private int no; private String name; private int age; public Student(int no, ...

  6. vue : watch、computed、以及对象数组

    watch和computed是vue框架中很重要的特性. 那么,他们是怎么作用于对象数组的? 今天我们就来探究一下. 上代码. <template> <div class=" ...

  7. 对象数组和对象对象数组的for-each循环

    对象数组的声明 类名称 对象数组名[] = null: 对象数组名 = new 类名称[长度] 定义并开辟数组 类名称 对象数据名[] = new 类名称[长度]; 在声明一个对象数组后,必须对每个数 ...

  8. vue 接口 对象数组的传入传出

    数组传入 对象的话用{...obj} <selectFile :tableData="[...tableData]" @uploadSuccess="data =& ...

  9. 1、C#基础：变量、运算符、分支、循环、枚举、数组、方法 <转>

    转自:海盗船长 链接:http://www.cnblogs.com/baidawei/p/4701504.html#3241882 C#..Net以及IDE简介 一.什么是.Net? .Net指 .N ...

随机推荐

  1. 03_15_interface

    03_15_interface 1. 接口 接口是抽象方法和常量值的定义的集合. 从本质上讲,接口是一种特殊的抽象类,这种抽象类中只包含常量和方法的定义,而没有变量和方法的实现. 2. 接口特性 接口 ...

  2. centos 6 安装VMware Tools

    开启虚拟机的centos系统, 在虚拟机工具栏点击 “虚拟机”=>VMwareTools安装,  centos系统内的桌面会有一个VMware Tools的驱动光驱, 双击打开后,有一个tar. ...

  3. nodejs mysql模块简单封装

    nodejs 简单的封装一些mysql模块 实现一个方法根据不同传参进行增删改查 首先要 npm install mysql 代码如下 function data(objHost,sql,callba ...

  4. STL笔记(に)--vector容器

    Vector 1.可变长的动态数组 2.需包含头文件#include<vector> (当然,如果用了万能头文件#include<bits/stdc++.h>则可忽略) 3.支 ...

  5. 爬虫学习（六）——异常处理URLerrors异常处理

    # 异常处理都在urllib.error中进行处理 import urllib.requestimport urllib.error # 第一种异常:该网址不存在url = "http:// ...

  6. Mysql--7种Join查询

    0.sql的执行顺序 手写顺序 机读顺序 总结 ①From:对from左边的表和右边的表计算笛卡尔积,产生虚拟表c1 ②On:对c1中的数据进行on过滤,只有符合过滤条件的数据记录才会记录在虚拟表c2 ...

  7. MultipartFile 动态决定是否上传文件,解决不上传文件报错

    controller 接收参数   用 HttpServletRequest 代替 @RequestParam()  接收参数 picFile 前台 传文件的参数名字  ,   这样 前段 传 nul ...

  8. PHP如何严格控制session过期时间

    第一种回答 那么, 最常见的一种回答是: 设置Session的过期时间, 也就是session.gc_maxlifetime, 这种回答是不正确的, 原因如下: 1. 首先, 这个PHP是用一定的概率 ...

  9. HDU1272小希的迷宫

    小希的迷宫 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一 ...

  10. 第2章c++简单程序设计

    第2章c++简单程序设计 知识梳理 以下是我遗忘以及认为重要的知识整理: 1.标识符的构成规则: 以大写字母.小写字母或下划线 _ 开始 由大写字母.小写字母.下划线 _ 或数字(0~9)组成 大写字 ...