<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. UCOSIII时间片轮转调度

    OS_RATE_HZ const OSCfg_TickRate_Hz = (OS_RATE_HZ )OS_CFG_TICK_RATE_HZ; #define OS_CFG_TICK_RATE_HZ 2 ...

  2. 笔谈I帧、P帧、B帧、PTS、DTS（一）

    做视频的播放,涉及到关键帧一说,从视频流中取出数据显示图像的时候,这些一幅幅图像之间到底有什么关联呢.那就有必要弄清楚I帧.P帧.B帧.PTS.DTS的概念,文章 I,P,B帧和PTS,DTS的关系  ...

  3. [AIR] NativeExtension在IOS下的开发实例 --- Flex库项目的创建(二)

    来源:http://bbs.9ria.com/thread-102038-1-1.html 上一章,我已经介绍了如果创建IOS库文件,并定义了两个方法ShowIconBadageNumber和Init ...

  4. SpringBoot+SpringCloud+vue+Element开发项目——数据库设计

    1.用户表(sys_user) CREATE TABLE `sys_user` ( `id` ) NOT NULL AUTO_INCREMENT COMMENT '编号', `name` ) NOT ...

  5. python中的debug

    python中有很多的debug方法,大部分新人忽略了Python debugger(pdb)的重要性. 1.命令行运行 在终端中输入命令行   python -m pdb helloword.py ...

  6. flask-sqlalchemy用法详解

    一. 安装 $ pip install flask-sqlalchemy 二. 配置 配置选项列表 : 选项 说明 SQLALCHEMY_DATABASE_URI 用于连接的数据库 URI .例如:s ...

  7. centos7小命令

    修改时区:timedate [root@centos2 ~]# timedatectl set-timezone Asia/Shanghai 修改语言:localectl [root@centos2 ...

  8. AD如何改变PCB文件的黑色背景

    第一步:打开AD软件,新建一个PCB文件.   2 第二步:在黑色区域随便画一个封闭的多边形——注意一定要是封闭的!   3 第三步:点击“Ctrl + A”快捷键将PCB整个文件选中.   4 第四 ...

  9. gdb调试（二）

    继续研究gdb相关的调试技巧,话不多说进入正题: 查看运行时数据: 这个上节中已经用过了,这里就不多说了,比较简单 还是有上节中的simple.c例子,不过得稍微做一些修改为了使用这些命令: simp ...

  10. HTTP和HTTPS的区别和常见的面试题

    本篇会着重介绍http和https的区别和常见的面试题 常见的http和https面试题: Http与Https的基本概念和他们的区别 HTTPS工作原理 常用的HTTP方法有哪些 GET方法与POS ...