<!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. k64 datasheet学习笔记39---Programmable Delay Block (PDB)

    0.前言 TODO 1.特性 TODO 4. 功能描述 4.1 PDB pre-trigger and trigger outputs PDB包含一个计数器,它的输出可以跟几个不同的数字值比较.如果P ...

  2. django2.0无法加载外部css和js的问题

    解决问题的思路来源于https://www.v2ex.com/t/430192 先是创建static目录,该目录与manage.py同级 然后在项目settings.py文件里添加 STATICFIL ...

  3. Win10上默认VS 2017以管理员身份运行

    Win10上的UAC虽然是个好东西,但是对于使用开发工作的技术人员来说有时候也挺麻烦.这里有一个让VS2017无论如何都以管理员身份运行的方法. 1.进入VS2017的安装目录:..\Microsof ...

  4. Java并发编程的4个同步辅助类

    Java并发编程的4个同步辅助类(CountDownLatch.CyclicBarrier.Semphore.Phaser) @https://www.cnblogs.com/lizhangyong/ ...

  5. canvas图片与img图片的相互转换

    最近在一个项目中,遇到了一个问题,需要把生成的canvas形式的二维码转换为图片,可以长按识别,保存等.查找了一些资料归纳总结了一些知识. 默认在jq库里进行,引入jquery.qrcode.min. ...

  6. Flask开发微电影网站(四)

    会员中心页面,如下图所示 用户登录后,修改密码页面,如下图所示 用户查看自己的评论页面,如下图所示 用户查看自己的登录日志页面,如下图所示 用户查看自己收藏的电影的页面,如下图所示 1. 定义用户主页 ...

  7. 使用Java API操作HDFS文件系统

    使用Junit封装HFDS import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.*; import org ...

  8. django请求生命周期,FBV和CBV,ORM拾遗,Git

    一.django 请求生命周期 流程图: 1. 当用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务端请求头和请求体中会包含浏览器的动作(action),这个动作通常为get或者post, ...

  9. 寻找符合条件的最短子字符串——SLIDING WINDOW

    简介 用一个可伸缩的窗口遍历字符串,时间复杂度大致为O(n).适用于“寻找符合某条件的最小子字符串”题型. 题目 链接 求某字符串T中含有某字符串S的所有字符的最小子字符串.如果不存在则返回" ...

  10. Maven mvn install 本地jar添加到本地maven仓库中

    mvn install:install-file -DgroupId=alipay -DartifactId=taobao-sdk-java-auto -Dversion=1.0 -Dpackagin ...