<!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. stm32F10x复习-1

    地点:家 1.库文件说明 _htmresc: LOGO的设计图 Libraries: 源代码及启动文件 -- CoreSupport 核内设备函数层的CM3核通用的源文件.作用是为采用Cortex-M ...

  2. 【Java编程思想笔记】反射

    文章参考:学习网站 how2java.cn 参考博客:(敬业的小码哥)https://blog.csdn.net/sinat_38259539/article/details/71799078 (青色 ...

  3. TCP/IP（五）传输层之细说TCP的三次握手和四次挥手

    前言 这一篇我将介绍的是大家面试经常被会问到的,三次握手四次挥手的过程.以前我听到这个是什么意思呀?听的我一脸蒙逼,但是学习之后就原来就那么回事! 一.运输层概述 1.1.运输层简介 这一层的功能也挺 ...

  4. JQuery Advanced

    1.Jquery Utility <1> Type & Function & setTimeOut <!DOCTYPE html> <html lang= ...

  5. Linux下安装python的gmpy2库及遇到无法定位软件包的解决办法

    gmpy2需要gmp.h &mpfr.h &mpc.h 安装命令: sudo apt-get install libmpfr-dev libmpc-dev  成功之后再输入安装命令: ...

  6. 【原创】大数据基础之Ambari（5）通过Ambari部署Hue

    ambari2.7.3(hdp3.1) 安装 hue4.2 ambari的hdp中原生不支持hue安装,下面介绍如何通过添加service的方式使ambari支持hue安装: 官方:http://ge ...

  7. Django 序列化-token

    幂等性 幂等性:多次操作的结果和一次操作的结果是一样的 ,put请求是幂等的 post请求不是幂等的 序列化组件 全局和局部钩子函数 异常信息抛出过程 认证 路由里的,login.as_view() ...

  8. SQL insert

    INSERT INTO 插入语句 INSERT INTO语句用于在表中插入新记录. 可以用两种方式编写INSERT INTO语句. 第一种方法指定列名和要插入的值: 1 2 INSERT INTO t ...

  9. rsync 安装

    #!/bin/bash #root running ] then echo "must is root running" exit fi if [ -e /etc/rsyncd.c ...

  10. python第九天（9-33）

    一:进程 进程概念 进程就是一个程序运行在一个数据集上的一次动态执行过程 进程一般由程序,数据集,进程控制块组成 进程控制块: 进程控制块用来记录进程的外部特征,描述进程的执行变化过程,系统可以利用它 ...