如下

<!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. 配置dubbo架构的maven项目

    1. 拆分工程 1)将表现层工程独立出来: e3-manager-web 2)将原来的e3-manager改为如下结构 e3-manager |--e3-manager-dao |--e3-manag ...

  2. 基于GMap.NET地图下载器的开发和研究

    基于GMap.NET地图下载器的开发和研究 软件下载地址:https://pan.baidu.com/s/1ay0aOm3fiZ35vlfD8kFYFw 1.地图浏览功能 可以浏览谷歌地图.百度.ar ...

  3. springboot中加入druid对sql进行监控

    springboot作为现在十分流行的框架,简化Spring应用的初始搭建以及开发过程,现在我们就使用springboot来进行简单的web项目搭建并对项目sql进行监控. 项目的搭建就省略了,spr ...

  4. 文档对象模型 DOM

    1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...

  5. 虚拟主机的搭建(ubuntu+apache2)

    搭建环境:windows+VMware(Ubuntu)+apache2.(同一IP,不同域名) 1:在VMware的虚拟机Ubuntu下安装apache2(怎么安装百度一下就能找到): 2: apac ...

  6. C语言实现判断分数等级

    从屏幕上输入一个学生的成绩(0-100),对学生成绩进行评定: <=60为"E" 60~69为"D" 70~79为"C" 80~89为 ...

  7. python3 练习题100例 （十二）

    题目十二:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数",因为153 ...

  8. Spark性能优化：资源调优篇

    在开发完Spark作业之后,就该为作业配置合适的资源了.Spark的资源参数,基本都可以在spark-submit命令中作为参数设置.很多Spark初学者,通常不知道该设置哪些必要的参数,以及如何设置 ...

  9. C#环境下使用Windows消息传递字符串数据的研究

    前言： 日前，师兄交给了我一个课题，将一个后台运行的Console程序，修改为WindowsForm程序，并在其界面上增加配置设置，以及运行记录。 原来的Console程序，后台运行的流程在其中一个类 ...

  10. IOS开发学习笔记031-代码实现微博界面

    微博界面如下 1.准备资源文件 新建一个plist文件,添加条目,root类型是array,子类型是Dictionary 2.更改父类,实现代理方法 接下来得实现过程如上一篇文章,改变父类为UITab ...