<!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. Linux centos系统安装后的基本配置,Linux命令

    一.centos系统安装后的基本配置 .常用软件安装 yum install -y bash-completion vim lrzsz wget expect net-tools nc nmap tr ...

  2. 【原创】大数据基础之Impala（2）实现细节

    一 架构 Impala is a massively-parallel query execution engine, which runs on hundreds of machines in ex ...

  3. 小程序引入百度api天气预报

    先看下最终的效果(默认可以获得未来三天数据): 第一:首先准备条件(必须): 1.小程序已认证,有appID 2.必须把https://api.map.baidu.com 添加到小程序的合法域名列表中 ...

  4. 数据表为null的字段添加默认值

    UPDATE im_clusters SET `location`='深圳会展中心' WHERE `location` is NULL

  5. SpringMVC的入门示例

    1.配置流程说明 第一步:导入包 第二步:构建一个请求,编写请求页面 第三步:配置核心控制器 第四步:构建一个业务控制器 第五步:编写Spring配置文件 第六步:编写一个返回页面 2.配置流程--- ...

  6. 详解 CAP 定理 Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性）

    CAP原则又称CAP定理,指的是在一个分布式系统中,Consistency(一致性). Availability(可用性).Partition tolerance(分区容错性),三者不可得兼. 分布式 ...

  7. Angular组件——投影

    运行时动态改变组件模版的内容.没路由那么复杂,只是一段html,没有业务逻辑. ngContent指令将父组件模版上的任意片段投影到子组件上. 一.简单例子 1.子组件中使用<ng-conten ...

  8. AGC-018 C

    题意: 有$X + Y + Z$个人,第$i$个人有$Ai$个金币,$Bi$个银币,$Ci$个铜币. 选出$X$个人获得其金币,选出$Y$ 个人获得其银币,选出$Z$个人获得 其铜币,在不重复选某个人 ...

  9. .net core 设置访问静态资源

  10. gitLib操作笔录《一》：创建分支，切换分支，提交分支到远程，以及基本代码clone与更新提交到远程操作指令

    git 操作经验注:master表示的是主线,origin 表示远程源 创建分支:git checkout -b < branch_name >或 < master >切换分支 ...