v-for同时循环一个对象和数组
<!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同时循环一个对象和数组的更多相关文章
- php学习笔记:foreach循环访问关联数组里的值
foreach循环可以将数组里的所有值都访问到,下面我们展示下,用foreach循环访问关联数组里的值. 例如: $fruit=array('apple'=>"苹果",'ba ...
- Java循环一个对象的所有属性,并通过反射给这些属性赋值/取值
Java循环一个对象的所有属性,并通过反射给这些属性赋值/取值 说到循环遍历,最常见的遍历数组/列表.Map等.但是,在开发过程中,有时需要循环遍历一个对象的所有属性.遍历对象的属性该如何遍历呢?查了 ...
- java 在循环中删除数组元素
在写代码中经常会遇到需要在数组循环中删除数组元素的情况,但删除会导致数组长度变化. package com.fortunedr.thirdReport; import java.util.ArrayL ...
- day05-java-(循环问题,数组)
day05-java-(循环问题,数组) 1.三种循环结构的更佳适用情况: 1)while: "当..."循环 2)do...while: "直到..."循 ...
- JavaScript-//FOR/IN循环。当使用for/in循环遍历关联数组时,就可以清晰地体会到for/in的强大之处。
<script> //FOR/IN循环.当使用for/in循环遍历关联数组时,就可以清晰地体会到for/in的强大之处. function getvalue(portfolio){ var ...
- 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 ...
- for 循环 和 Array 数组对象
博客地址:https://ainyi.com/12 for 循环 和 Array 数组对象方法 for for-in for-of forEach效率比较 - 四种循环,遍历长度为 1000000 的 ...
- java _循环练习和数组练习
练习 1.输出所有的水仙花数,所谓水仙花数是指一个数3位数,其每位数字立方和等于其本身,如153 = 1*1*1 + 3*3*3 + 5*5*5(很经典的题目) 分析: 通过观察发现,本题目要实现打印 ...
- C#不允许在foreach循环中改变数组或集合中元素的值(注:成员的值不受影响)
C#不允许在foreach循环中改变数组或集合中元素的值(注:成员的值不受影响),如以下代码将无法通过编译. foreach (int x in myArray) { x++; //错误代码,因为改变 ...
随机推荐
- Django组件-用户认证
用户认证 一.auth模块 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1.1 .authenti ...
- 2017蓝桥杯第十题(k倍区间)
#include<iostream> #include<stdio.h> using namespace std; ; ],a[N]; int lowbit(int n){ r ...
- Laravel 生成migration ,boolean字段字段转为tinyInteger
Schema::create('consults', function (Blueprint $table) { $table->increments('id'); $table->str ...
- 【原创】大叔经验分享(11)python引入模块报错ImportError: No module named pandas numpy
python应用通常需要一些库,比如numpy.pandas等,安装也很简单,直接通过pip # pip install numpyRequirement already satisfied: num ...
- django 第四天
简单的一对多的页面 实现的页面结果如下 利用正则匹配 1.x系列和2.x系列django的用法不同,....他x的. 关于正则匹配 我一直没能实现,再试试吧 路由分发,尤其是在多个页面的时候 app0 ...
- golang mysql 的 packet sequence error 这个错
在公司用golang 写了个插入外链数据的服务,这服务是2016年写的,大概作用就是,python 爬取的数据,要同步到 wordpress中,golang就负责,将数据整理,图片下载弄到 wordp ...
- eclipse查看一个方法被谁引用(调用)的快捷键四种方式
1.(首推)双击选中该方法,Ctrl+Alt+H 如果你想知道一个类的方法到底被那些其他的类调用,那么请选中这个方法名,然后按“Ctrl+Alt+H”, Eclipse就会显示出这个方法被哪些方法调用 ...
- Scrapy Selectors 选择器
0. 1.参考 <用Python写网络爬虫>——2.2 三种网页抓取方法 re / lxml / BeautifulSoup 需要注意的是,lxml在内部实现中,实际上是将CSS选择器转 ...
- linux 硬盘满了如何处理
事件源于在服务器运行一个脚本程序… 好好的脚本突然报错,还以为脚本出现问题了.细看报错原因(具体报错信息已经忘记了),是没有可用空间.从没遇见过这个情况,怎么办呢? 一.确定是不是真的是磁盘空间不足 ...
- Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第九集-补充-之安装iptables】
1,安装完了jdk,tomcat,启动tomcat的bin/startup.sh后,发现在浏览器输入公网ip地址和tomcat的默认(server.xml)中的端口port:8080,无法访问,这主要 ...