1. 遍历对象时,参数： 第一个为值，第二个为键名，第三个为索引

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <!-- Step1.对于vue,可以用cdn -->

     <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

     <style>

         #app div{

             padding: 2%;

             margin-bottom: 1%;

             border-bottom: 1px solid #ddd;

             background-color: blanchedalmond;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <!-- 对象遍历 -->

         <div v-for="(value, key, index) in object">

             {{ index }}. {{ key }} - {{ value }}

         </div>

         <!-- 数组对象遍历 -->

         <div v-for="(value, key, index) in objectArray">

             姓名：{{value.name}}

             年龄:{{value.age}}

         </div>

     </div>

     <script type="text/javascript">

         var app = new Vue({

             el: '#app',

             data: {

                 // 对象

                 object: {

                     name: '张三',

                     names: '李四'

                 },

                 // 数组对象

                 objectArray: [

                     {

                         name: '张三',

                         age: 14

                     },

                     {

                         name: '李四',

                         age: 18

                     }

                 ]

             }

         })

     </script>

 </body>

 </html>

vue - for 遍历对象和遍历对象数组的更多相关文章

  1. JSON语法、对象、遍历数组的区别和基本操作

    JSON 语法规则 JSON 语法是 javascript 对象表示语法的子集. 数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组 JSON 名称/值对 JSON 数据的书写格式是: ...

  2. JS数组与对象的遍历方法大全

    本文简单解析各种数组和对象属性的遍历方法: 原生for循环.for-in及forEach ES6 for-of方法遍历类数组集合 Object.key()返回键名的集合 jQuery的$.each() ...

  3. JS中数组与对象的遍历方法实例小结

    一.数组的遍历: 首先定义一个数组 1 arr=['snow','bran','king','nightking']; 1.for循环,需要知道数组的长度; 2.foreach,没有返回值,可以不知道 ...

  4. JavaScript中，数组和对象的遍历方法总结

    循环遍历是写程序很频繁的操作,JavaScript 提供了很多方法来实现. 这篇文章将分别总结数组和对象的遍历方法,新手可以通过本文串联起学过的知识. 数组遍历 方法一:for 循环 for 循环是使 ...

  5. Struts标签<s:iterator>遍历访问复杂Map对象

    <s:iterator value="resultType" id="geneUi"> //拿到要遍历的Map对象 <s:iterator v ...

  6. Java基础知识强化之集合框架笔记06：Collection集合存储自定义对象并遍历的案例

    1.练习:用集合存储5个学生对象,并把学生对象进行遍历. 分析: (1)创建学生类(2)创建集合对象(3)创建学生对象(4)把学生添加到集合(5)把集合转成数组(6)遍历数组 2. 代码示例: Stu ...

  7. js 对象属性遍历

    function 对象属性遍历(){ var obj = {x:1,y:2,c:3};for (var name in obj){ alert ( obj[name] )} } function 数组 ...

  8. PHP对象的遍历

    对象的遍历 对象的遍历,跟数组的遍历,一样! 其实,只能遍历出对象的“实例属性数据” foreach( $对象名  as   $key => $value){ //这里就可以处理$key和$va ...

  9. jquery中object对象循环遍历的方法

    一个朋友问对象如何转为数组,当我问他为啥要转得时候,他告诉我,数组可以用js循环遍历,而对象则不可以.其实呢,对象同样可以循环遍历的啊.不用转换也可以循环!说明你对js或者jquery的某些操作不是很 ...

  10. 遍历器Iterator--指针对象

    一. 什么是遍历器 1. 遍历器对象(Iterator) 遍历器对象本质上是一个指针对象,该对象有一个next方法,调用next方法返回一个 含有value和done属性的对象{value: val/ ...

随机推荐

  1. EL使用技巧

    ☞控制页面元素显示与否 实现效果: 实现方案: ...... <div style="display:${empty param.hideTitle ? 'auto' : 'none' ...

  2. 【找规律】【二进制拆分】hdu6129 Just do it

    给你数列a,问你对它作m次求前缀异或和之后的新数列是什么. 考虑a1对最终生成的数列的每一位的贡献,仅仅考虑奇偶性, 当m为2的幂次的时候,恰好是这样的 2^0 1 1 1 1 1 ... 2^1 1 ...

  3. 【CCpp程序设计2017】推箱子游戏

    我的还……支持撤销!用链表实现! 题目:推箱子小游戏(基于console) 功能要求: 将p09迷宫游戏改造为“推箱子”游戏: 在地图中增加箱子.箱子目标位置等图形: 当玩家将所有箱子归位,则显示玩家 ...

  4. 【最大流】BZOJ1305-[CQOI2009]dance跳舞

    [题目大意] 一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢,而其他相互不喜欢(不会“单向喜欢 ...

  5. [bzoj1008](HNOI2008)越狱(矩阵快速幂加速递推)

    Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 In ...

  6. InetAddress之域名解析

    1. getByName public static InetAddress getByName(String host) throws UnknownHostException { return I ...

  7. codevs 1779 单词的划分

    1779 单词的划分 时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description Problem有一个很长的由小写字母组成字符串.为了便于对 ...

  8. 慢查询(找出mysql中超时的select语句)

    第一步:进入mysql界面 //查询多少秒 才属于慢查询. show variables like ‘long_query_time’ ; 第二步: //更改这个时间值  如:select语句执行超过 ...

  9. 理解SQL Server是如何执行查询的---Joe-T :mvp

    http://www.cnblogs.com/Joe-T/ http://rusanu.com/2013/08/01/understanding-how-sql-server-executes-a-q ...

  10. java多线程之同一个锁和分离锁

    1.对集合/共享对象的读写方法同一个锁,故无法实现读写并行.典型的就是arrayblockingQueue.数组阻塞队列 2.对同一个数据的读写方法采用分离锁,则可以实现读写并行.典型的就是linkB ...