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. [thinkphp] 无限极分类

    <?php /* * 无限极分类 类 */ header("Content-Type: text/html; charset=UTF-8"); Class Category ...

  2. VMware8安装配置Win7、CentOS-7向导

    1.宿主电脑配置情况 Windows 8.1 中文版 Intel(R) Core(TM) i5-4210U CPU @ 1.70GHz 2.4GHz RAM: 8G Type: 64 bit 2.软件 ...

  3. “玲珑杯”ACM比赛 Round #19 B -- Buildings （RMQ + 二分）

    “玲珑杯”ACM比赛 Round #19 Start Time:2017-07-29 14:00:00 End Time:2017-07-29 16:30:00 Refresh Time:2017-0 ...

  4. [BZOJ2669][CQOI2012]局部最小值(容斥+状压DP)

    发现最多有8个限制位置,可以以此为基础DP和容斥. $f_{i,j}=f_{i-1,j}\times (cnt_j-i+1)+\sum_{k\subset j} f_{i-1,k}$ $cnt_j$表 ...

  5. 调用sort段错误问题

    问题:sort的比较函数实现有问题导致进程调用sort时core了. 结论:特别要注意,sort的比较函数必须遵循严格弱排序(strict weak ordering)的规则.   这是最近在工作中遇 ...

  6. [Codeforces #494] Tutorial

    记录下一开始写错的两道水题 E: 先建出直径,然后在保证直径不变的情况下按照最大度数贪心就好了 注意一下一开始的特判 #include <bits/stdc++.h> using name ...

  7. 2017 Multi-University Training 1 解题报告

    Add More Zero Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  8. [Codeforces-div.1 809C] Find a car

    [Codeforces-div.1 809C] Find a car 试题分析 莫名结论:\(a_{i,j}=(i-1) xor (j-1) +1\) 然后分成\(i\space xor\space ...

  9. BZOJ 1221 [HNOI2001] 软件开发（费用流）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1221 [题目大意] 每天对毛巾都有一定的需求ni,每天可以花f价值每条购买毛巾, 当天 ...

  10. 将json字符串转换成list<T>

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Se ...