<!DOCTYPE html>

<html lang="zh">

<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>在一个空间中同时循环数组和对象 / 同时循环两个数组</title>

</head>

<body>

	<div id="app">

		<!--循环对象和数组-->

		<div v-for="(item,key,index) in obj">

			<!--{{ key }} {{ index }}-->

			{{ arr[index].name }} {{ item }}

		</div>

		<!--循环两个数组-->

		<div v-for="(item, index) in arr">

			{{ item.name }}	{{ arrs[index].text }}

		</div>

		<!--循环两个对象 不可行-->

		<div v-for="(item,key,index) in obj">

			{{ item }} {{ objs[key].one }}

		</div>

	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<script>

		var vm = new Vue({

			el:'#app',

			data:{

				arr:[

					{'name':'一秀'},

					{'name':'二举'},

					{'name':'三红'},

					{'name':'四进'}

				],

				arrs:[

					{'text':'自古多情'},

					{'text':'空余恨'},

					{'text':'此恨绵绵'},

					{'text':'无绝期'}

				],

				obj:{

					age:16,

					job:'web',

					eat:'黄焖鸡米饭',

					keyboard:'非机械'

				},

				objs:{

					one:'this is one',

					two:'this is two',

					three:'this is three',

					four:'this is four'

				}

			}

		})

	</script>

</body>

</html>

v-for同时循环一个对象和数组的更多相关文章

  1. php学习笔记：foreach循环访问关联数组里的值

    foreach循环可以将数组里的所有值都访问到,下面我们展示下,用foreach循环访问关联数组里的值. 例如: $fruit=array('apple'=>"苹果",'ba ...

  2. Java循环一个对象的所有属性，并通过反射给这些属性赋值/取值

    Java循环一个对象的所有属性,并通过反射给这些属性赋值/取值 说到循环遍历,最常见的遍历数组/列表.Map等.但是,在开发过程中,有时需要循环遍历一个对象的所有属性.遍历对象的属性该如何遍历呢?查了 ...

  3. java 在循环中删除数组元素

    在写代码中经常会遇到需要在数组循环中删除数组元素的情况,但删除会导致数组长度变化. package com.fortunedr.thirdReport; import java.util.ArrayL ...

  4. day05-java-（循环问题，数组）

    day05-java-(循环问题,数组) 1.三种循环结构的更佳适用情况:  1)while: "当..."循环  2)do...while: "直到..."循 ...

  5. JavaScript-//FOR/IN循环。当使用for/in循环遍历关联数组时，就可以清晰地体会到for/in的强大之处。

    <script> //FOR/IN循环.当使用for/in循环遍历关联数组时,就可以清晰地体会到for/in的强大之处. function getvalue(portfolio){ var ...

  6. JavaScript 中的常用12种循环遍历（数组或对象）的方法

    1.for 循环 let arr = [1,2,3]; for (let i=0; i<arr.length; i++){ console.log(i,arr[i]) } // 0 1 // 1 ...

  7. for 循环 和 Array 数组对象

    博客地址:https://ainyi.com/12 for 循环 和 Array 数组对象方法 for for-in for-of forEach效率比较 - 四种循环,遍历长度为 1000000 的 ...

  8. java _循环练习和数组练习

    练习 1.输出所有的水仙花数,所谓水仙花数是指一个数3位数,其每位数字立方和等于其本身,如153 = 1*1*1 + 3*3*3 + 5*5*5(很经典的题目) 分析: 通过观察发现,本题目要实现打印 ...

  9. C#不允许在foreach循环中改变数组或集合中元素的值（注：成员的值不受影响）

    C#不允许在foreach循环中改变数组或集合中元素的值(注:成员的值不受影响),如以下代码将无法通过编译. foreach (int x in myArray) { x++; //错误代码,因为改变 ...

随机推荐

  1. codeblocks修改字体颜色-背景颜色

    常用: 1. 编辑器背景-豆沙绿配置:色调85,饱和度123,亮度205: 2. 注释颜色-紫色:rgb(255,0,255): 参考: 改变codeblocks里面各种注释的颜色 常用颜色的RGB值 ...

  2. 主机服务绑定IP

    在用 netstat -na  查看当前主机提供的服务,例如显示如下结果: tcp        0      0 127.0.0.1:9000              0.0.0.0:*      ...

  3. 学习pano2vr制作html5全景笔记

    demo截图: demo下载: 百度网盘:http://pan.baidu.com/s/1o8yBwIA 密码:nf62(启服务端查看); 我制作是全屏定点360的全景页面,使用pano2vr软件制作 ...

  4. 【原创】大数据基础之Oozie（3）Oozie从4.3升级到5.0

    官方文档如下: http://oozie.apache.org/docs/5.0.0/AG_OozieUpgrade.html 这里写的比较简单,大概过程如下:1 下载5.0代码并编译:2 解压5.0 ...

  5. Python 爬虫 当当网图书 scrapy

    目标站点需求分析 获取当当网每个图书名字和评论数 涉及的库 scrapy,mysql 获取解析单页源码 保存到数据库中 结果

  6. 洛谷P5280 [ZJOI2019]线段树 [线段树，DP]

    传送门 无限Orz \(\color{black}S\color{red}{ooke}\)-- 思路 显然我们不能按照题意来每次复制一遍,而多半是在一棵线段树上瞎搞. 然后我们可以从\(modify\ ...

  7. JavaScript入门学习笔记（二）

    JavaScript运算符: 算术运算符.赋值运算符和字符串连接运算符. 算法运算符与复制运算符用法参照Java: 字符串运算符: +运算符用于把文本值或字符串变量连接起来,适用于两个或更多字符串变量 ...

  8. Mac下mongodb connect failed 连接错误解决方法

    查看elm 后台node 代码 一直连不上mongodb,报错 MongoDB shell version v3.6.0 connecting to: mongodb://127.0.0.1:2701 ...

  9. ionic3 国际化 转义 html

    <div [innerHTML]="assembleHTML(detail)"> import { DomSanitizer } from '@angular/plat ...

  10. Git使用八：创建和切换分支

    git的分支 与svn对比 克隆一份全新的目录以同样拥有 5 个分支来说,SVN 是同时复制 5 个版本的文件,也就是说重复 5 次同样的动作.而 Git 只是获取文件的每个版本的元素,然后只载入主要 ...