【VUE】vue中遍历数组和对象
一、遍历对象
对象数据
cities:{
"A":[{
"id": 56,
"spell": "aba",
"name": "阿坝"
}, {
"id": 57,
"spell": "akesu",
"name": "阿克苏"
}, {
"id": 58,
"spell": "alashanmeng",
"name": "阿拉善盟"
}, {
"id": 59,
"spell": "aletai",
"name": "阿勒泰"
}, {
"id": 60,
"spell": "ali",
"name": "阿里"
}],
"B":[{
"id": 1,
"spell": "beijing",
"name": "北京"
}, {
"id": 66,
"spell": "baicheng",
"name": "白城"
}, {
"id": 67,
"spell": "baise",
"name": "百色"
}, {
"id": 68,
"spell": "baishan",
"name": "白山"
}, {
"id": 69,
"spell": "baiyin",
"name": "白银"
}, {
"id": 70,
"spell": "bangbu",
"name": "蚌埠"
}]
}
遍历格式
<div class="father" v-for="(item, key) of cities" :key="key">
<div class="type">
{{key}}
</div>
<div class="item-list" v-for="innerItem of item" :key="innerItem.id">
{{innerItem.name}}
</div>
</div>
最终效果
"hotCities": [{
"id": 1,
"spell": "beijing",
"name": "北京"
}, {
"id": 3,
"spell": "shanghai",
"name": "上海"
}, {
"id": 47,
"spell": "xian",
"name": "西安"
}]
二、引用数组
数组数据
"hotCities": [{
"id": 1,
"spell": "beijing",
"name": "北京"
}, {
"id": 3,
"spell": "shanghai",
"name": "上海"
}, {
"id": 47,
"spell": "xian",
"name": "西安"
}, {
"id": 239,
"spell": "sanya",
"name": "三亚"
}]
遍历格式
<div v-for="item of hotCities" :key="item.id">
{{item.name}}
</div>
最终效果
【VUE】vue中遍历数组和对象的更多相关文章
- JavaScript中遍历数组和对象的方法
js数组遍历和对象遍历 针对js各种遍历作一个总结分析,从类型用处,分析数组和对象各种遍历使用场景,优缺点等 JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3 ...
- JS中遍历数组、对象的方式
1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...
- php中遍历数组的方法
参考网址:http://www.jb51.net/article/29949.htm 这三种方法中效率最高的是使用foreach语句遍历数组.从PHP4开始就引入了foreach结构,是PHP中专门为 ...
- vue遍历数组和对象的方法以及他们之间的区别
前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组 1,使用vue数组变异方法 pop() 删除数组最后一 ...
- Vue中遍历数组的新方法
1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ ...
- vue中改变数组或对象,页面没做出对应的渲染
原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...
- Vue基础学习 --- 遍历数组
<body> <div id="app"> <ul> <!-- 遍历数组 --> <li v-for="user i ...
- JavaScript中,数组和对象的遍历方法总结
循环遍历是写程序很频繁的操作,JavaScript 提供了很多方法来实现. 这篇文章将分别总结数组和对象的遍历方法,新手可以通过本文串联起学过的知识. 数组遍历 方法一:for 循环 for 循环是使 ...
- Vue方法中修改数组某一项元素而不能响应式更新
<template> <div> <ul> <li v-for="(item, i) in ms" :key="i"& ...
随机推荐
- HTML网页设计基础笔记 • 【目录】
持续更新中- 我的大学笔记>>> 章节 内容 第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章 排列页面内容] 第3章 ...
- Java中List与数组互相转换
1.说明 在Java中,经常遇到需要List与数组互相转换的场景. List转换成数组,可以使用List的toArray()或者toArray(T[] a)方法. 数组转换成List,可以使用Arra ...
- 【Warrior刷题笔记】力扣169. 多数元素 【排序 || 哈希 || 随机算法 || 摩尔投票法】详细注释 不断优化 极致压榨
题目 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/majority-element/ 注意,该题在LC中被标注为easy,所以我们更多应该关 ...
- tcpdump统计http请求并导出URL文本
tcpdump统计http请求并导出URL文本 tcpdump tcpdump是一个用于截取网络分组,并输出分组内容的工具.凭借强大的功能和灵活的截取策略,使其成为类UNIX系统下用于网络分析和问题排 ...
- css基础-1
css简介 一.CSS 指层叠样式表 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部 ...
- VoIP语音处理流程和知识点梳理
做音频软件开发10+年,包括语音通信.语音识别.音乐播放等,大部分时间在做语音通信.做语音通信中又大部分时间在做VoIP语音处理.语音通信是全双工的,既要把自己的语音发送出去让对方听到,又要接收对方的 ...
- MongoDB_数据模型&数据类型(四)
数据模块 传统的关系型数据库需要对表结构进行预先定义和严格的要求,而这样的严格要求,导致了处理数据的过程更加烦琐,甚至降低了执行效率. 在数据量达到一定规模的情况下,传统关系型数据库反应迟钝,想解决这 ...
- 用一道题 来 复习 MySQL 的 复杂 sql 语句
1.前言 太久没有在数据库做一些复杂的sql了,基本上将数据库的查询逻辑全放在了Java里做, 一来呢,可以减轻数据库的负担,二来呢,在java写,逻辑感会更强,数据类型更丰富也容易操作. 然而... ...
- k8s中的nginx-ingress如何配置路径重定向
k8s中的nginx-ingress如何配置路径重定向 一. 需求描述 路径重定向的一般应用场景: 调整用户浏览的URL,看起来更规范 为了让搜索引擎收录网站内容,让用户体验更好 网站更换新域名后 根 ...
- vue 快速入门 系列 —— 模板
其他章节请看: vue 快速入门 系列 模板 前面提到 vue 中的虚拟 dom 主要做两件事: 提供与真实节点对应的 vNode 新旧 vNode 对比,寻找差异,然后更新视图 ①.vNode 从何 ...