<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. iOS-H5交互综合整理

    1.WKWebView的使用 2.常见问题 2.1 iOS开发 WKWebView下js的alert(),confirm(),prompt()方法无法正常执行

  2. mysql的左连接问题

    之前写过一个mysql语句,功能是将一个表ds的一个字段值同步更新到另一个表bk的字段,不过不是全部,只更新表bk中有的数据,如果表bk中有而表ds中没有,表B对应的这个字段值就为空 UPDATE b ...

  3. MySQL Index--CREATE INDEX在各版本的优化

    FIC(Fast index creation)特性在MySQL 5.5版本中引入FIC(Fast index creation)特性,创建索引时无需再拷贝整表数据,以提升索引的创建速度. FCI 操 ...

  4. python的continue和break

    continue:表示终止当前循环,开始下一次循环 break:终止所有循环 s = 0 while s < 3: s += 1 print(s) continue#'@' print(abc) ...

  5. RestTemplate对象，进行get和post简单用法

    如果只是针对纯Rest接口处理的话,我们可以使用restTemplate对象来操作,简单方便,可以不需要手写httpClient代码了. 我们看下基本的用法,如下: 1.getForObject cl ...

  6. HTML&CSS基础-边框简写属性

    HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...

  7. 数据库类型对应Java语言类型表

    下表列出了基本 SQL Server.JDBC 和 Java 编程语言数据类型之间的默认映射: SQL Server 类型 JDBC 类型 (java.sql.Types) Java 语言类型 big ...

  8. Redis与Python的交互

    驱动模块 redis模块用来在Python环境下驱动Redis数据库 可以直接用pip方式安装 pip install redis 或者国内镜像下载: pip install -i https://p ...

  9. 大数据之路week07--day06 （Sqoop 在从HDFS中导出到关系型数据库时的一些问题）

    问题一: 在上传过程中遇到这种问题: ERROR tool.ExportTool: Encountered IOException running export job: java.io.IOExce ...

  10. 《你说对就队》第八次团队作业：Alpha冲刺

    <你说对就队>第八次团队作业:Alpha冲刺 项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 团队名称 <你说对就队> 作业学习 ...