<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学习之字符串(NSString)的截取、匹配、分隔

    截取 NSString *str1 = @"this is zero"; 1.从第三个字符开始,截取长度为2的字符串.........注:空格算作一个字符 NSString *st ...

  2. Jmeter学习笔记（十一）——定时器

    默认情况下,Jmeter线程在发送请求之间没有间歇.不设置定时器,短时间内会产生大量访问请求,导致服务器被请求淹没,利用Jmeter进行压测时,一般会和定时器一起,控制请求的吞吐量和并发数. 一.定时 ...

  3. js sort() 排序用法（转载）

    原文:https://blog.csdn.net/m0_37885651/article/details/80016718 sort() 方法用于对数组的元素进行排序,并返回数组.默认排序顺序是根据字 ...

  4. Metasploit3

    1.之前使用的版本是Metasploit2的版本操作系统是基于Ubuntu的,渗透测测试模块也是基于metasploit的,基本上没有设置,Metasploitable3添加了很多安全机制 ,防火墙和 ...

  5. java 懒汉式、饿汉式单例模式 不含多线程的情况

    //饿汉式 提前生成了单例对象 class Singleton{ private static final Singleton instance=new Singleton(); private Si ...

  6. nginx简单学习

    1.nginx的安装 .yum解决编译nginx所需的依赖包,之后你的nginx就不会报错了 yum install gcc patch libffi-devel python-devel zlib- ...

  7. nginx+keepalived高可用 （主从+双主）

    1.Nginx+keepalived 主从配置这种方案,使用一个vip地址,前端使用2台机器,一台做主,一台做备,但同时只有一台机器工作,另一台备份机器在主机器不出现故障的时候,永远处于浪费状态,对于 ...

  8. LightOJ - 1354 - IP Checking(进制）

    链接: https://vjudge.net/problem/LightOJ-1354 题意: An IP address is a 32 bit address formatted in the f ...

  9. nginx 超时配置、根据域名、端口、链接 配置不同跳转

    Location正则表达式location的作用  location指令的作用是根据用户请求的URI来执行不同的应用,也就是根据用户请求的网站URL进行匹配,匹配成功即进行相关的操作. locatio ...

  10. [NgRx] NgRx Data Fetching Solution - How to Load Data Only If Needed

    We have a reoslver, which everytime we want visit '/courses' route, it will be triggered, then api w ...