<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. 设置Django生产环境系统重启后的自动启动项

    前面,作者已经介绍了把Django部署到生产环境中的主要方法,现在我们来看一下如何设置项目开机启动. 在把Django项目部署到生产环境中时,我们前面使用安装包和源码安装了Nginx.uwsgi.re ...

  2. ISCC之web2

    Php代码审计 PHP代码 <?php error_reporting(0); require 'flag.php'; $value = $_GET['value']; $password = ...

  3. Java精通并发-透过openjdk源码分析wait与notify方法的本地实现

    上一次https://www.cnblogs.com/webor2006/p/11442551.html中通过openjdk从c++的底层来审视了ObjectMonitor的底层实现,这次继续来探究底 ...

  4. linux的vim基本使用

    转自:https://www.cnblogs.com/qq631243523/p/10191714.html 所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在 ...

  5. Webpack快速入门

    什么是Webpack 顾名思义它是一个前端打包工具,通过给定的入口文件自动梳理所有依赖资源(包括css.图片.js等),并按照配置的规则进行一系列处理(转es5.压缩等),打包生成适合现代生产环境要求 ...

  6. 生成一个uuid字符串,并去除多余的符号

    for(int i=0;i<10;i++){ String uuid = UUID.randomUUID().toString().replaceAll("-", " ...

  7. IntelliJ IDEA：给 web 应用提供 JSTL 支持

    最近在看<Head First Servlet JSP>学习JSP,看到JSTL一章,为了添加JSTL支持折腾了好久. 网上的教程五花八门,而且多数比较旧. 我尝试了各种方法都没有成功,很 ...

  8. nachos3.4 threads管理 （c++）

    Main.cc //引导代码初始化操作系统内核.允许直接调用内部操作系统功能,简化调试和测试.在实践中,bootstrap代码只会初始化数据结构, //并启动一个用户程序来打印登录提示.//许多内容只 ...

  9. Java switch语句使用注意事项

    1.多个case后面的值不可以重复 2.switch后面小括号的数据类型(case 后面的数值类型)只能是以下类型 基本数据类型: byte / short / char / int 引用数据类型:S ...

  10. printf的使用和test的使用

    1.printf的使用 printf的转义序列 序列 说明 \a 警告字符,通常为ASCII的BEL字符 \b 后退 \c 抑制(不显示)输出结果中任何结尾的换行字符(只在%b格式指示符控制下的参数字 ...