<body>

    <div id="app">

        <ul>

        <!-- 遍历数组 -->

            <li v-for="user in users">

                 {{user.name}}:{{user.age}}

            </li>

            <!-- index索引，从0开始。 -->

            <li v-for="(item, index) in users" :key="index">

                {{item.name}}:{{item.age}}

            </li>

        <!-- 遍历对象 value值如：Nimeide   index键如:name-->

            <li v-for="(value, index) in wife" :key="index">

                {{value}}--{{index}}

            </li>

        </ul>

    </div>

    <script>

        const vm = new Vue({

            el: '#app',

            data() {

                return {

                    // 数组

                    users: [

                        { name: 'lisi', age: 12 },

                        { name: 'zhangsan', age: 19 },

                    ],

                    // 对象

                    wife: {

                        name: 'Nimeide',

                        age: 18

                    }

                }

            },

        });

    </script>

</body>

Vue基础学习 --- 遍历数组的更多相关文章

  1. Vue – 基础学习(4):事件修饰符

    Vue – 基础学习(3):事件修饰符

  2. Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

    Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

  3. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  4. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  5. 前端Vue基础学习

    Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...

  6. Java基础学习之数组基本属性和方法

    数组对于每一门编程语言都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同.Java语言中提供的数组是用来存储固定大小的同类型元素.你可以声明一个数组变量,如 int[100] 来代替直接 ...

  7. JavaScript基础学习(三)—数组

    一.数组简介     JavaScript数组的每一项都可以保存任何类型的数据,也就是说数组的第一个位置保存字符串,第二个位置可以保存数值,第三个位置可以保存对象,而且数组的大小是可以动态调整的,即可 ...

  8. 【转】vue基础学习

    1.基本绑定:    new Vue(        {            el:'#elID',            data:{                // data obj     ...

  9. vue基础学习（一）

    01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= func ...

随机推荐

  1. 离线安装zabbix文档

    为了离线安装需要离线安装包,可以通过这个方式获取. 用yum安装软件默认不保存软件包,要保存需修改配置文件 #  vi   /etc/yum.conf 将keepcache的值改为1 安装版本:rel ...

  2. 分布式系统session一致性解决方案

    在单机系统中,不存在Session共享问题,但是在分布式系统中,我们必须实现session共享机制,使得多台应用服务器之间会话统一,如果不进行Session共享会出现数据不一致,比如:会导致请求落到不 ...

  3. live555的使用（转载）

    Live555 是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了对标准流媒体传输协议如RTP/RTCP.RTSP.SIP等的支持.Live555实现 了对多种音视频编码格式的音视频数据的流 ...

  4. 绘图 Matplotlib Numpy Pandas

    丈夫气力全,一个拟当千.猛气冲心出,视死亦如眠. 绘图 Matplotlib可视化是在整个数据挖掘的关键辅助工具,可以清晰的理解数据,从而调整我们的分析方法. 能将数据进行可视化,更直观的呈现使数据更 ...

  5. nginx_status

    server { listen ; server_name blog.oldboy.com; root /code/wordpress; index index.php index.html; loc ...

  6. 【Python】使用Python压缩文件/文件夹

    [Python压缩文件夹]导入“zipfile”模块 def zip_ya(startdir,file_news): startdir = ".\\123" #要压缩的文件夹路径 ...

  7. Intellij IDEA – How to build project automatically

    By default, Intellij IDEA doesn’t compile classes automatically. But, you can enable the auto compil ...

  8. FRCN文本检测（转）

    [源码分析]Text-Detection-with-FRCN 原创 2017年11月21日 17:58:39 标签: 659 编辑 删除 Text-Detection-with-FRCN项目是基于py ...

  9. mysql数据库从一台服务器迁移到另一台服务器上

    一.应用场景      由于要把测试服务器上的数据库迁移到正式服务器上,因此需要做数据库的迁移.这里记录一下. 二.数据库迁移1.新建数据库test create database test;12.进 ...

  10. 洛谷 P2401 不等数列 题解

    每日一题 day25 打卡 Analysis dp[i][j]=dp[i-1][j-1]*(i-j)+dp[i-1][j]*(j+1); 其中i和j是表示前i个数中有j个小于号,j<=i-1 要 ...