一、遍历对象

对象数据

       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中遍历数组和对象的更多相关文章

  1. JavaScript中遍历数组和对象的方法

    js数组遍历和对象遍历 针对js各种遍历作一个总结分析,从类型用处,分析数组和对象各种遍历使用场景,优缺点等 JS数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3 ...

  2. JS中遍历数组、对象的方式

    1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...

  3. php中遍历数组的方法

    参考网址:http://www.jb51.net/article/29949.htm 这三种方法中效率最高的是使用foreach语句遍历数组.从PHP4开始就引入了foreach结构,是PHP中专门为 ...

  4. vue遍历数组和对象的方法以及他们之间的区别

    前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组   1,使用vue数组变异方法 pop() 删除数组最后一 ...

  5. Vue中遍历数组的新方法

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ ...

  6. vue中改变数组或对象,页面没做出对应的渲染

    原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...

  7. Vue基础学习 --- 遍历数组

    <body> <div id="app"> <ul> <!-- 遍历数组 --> <li v-for="user i ...

  8. JavaScript中,数组和对象的遍历方法总结

    循环遍历是写程序很频繁的操作,JavaScript 提供了很多方法来实现. 这篇文章将分别总结数组和对象的遍历方法,新手可以通过本文串联起学过的知识. 数组遍历 方法一:for 循环 for 循环是使 ...

  9. Vue方法中修改数组某一项元素而不能响应式更新

    <template> <div> <ul> <li v-for="(item, i) in ms" :key="i"& ...

随机推荐

  1. Java基础寒假作业-简易计算器

    需求: 使用Java编写计算器的控制台程序,完成简单的加减乘除运算.实现以下功能: 1.运算选择 请用户选择一个算法(1.加法 2.减法 3.乘法 4.除法 5.关闭计算器) 2.计算 a)加法:实现 ...

  2. Java中的关键字有哪些?「Java中53个关键字的意义及使用方法」

    Java中的关键字有哪些? 1)48个关键字:abstract.assert.boolean.break.byte.case.catch.char.class.continue.default.do. ...

  3. Java面向对象程序设计作业目录(作业笔记)

    持续更新中............. 我的大学笔记>>> 第1章 面向对象 >>> 1.1.5 编写Java程序,创建Dota游戏中的防御塔类,通过两个坐属性显示防 ...

  4. WinForm应用程序的开机自启、记住密码,自动登录的实现

    一.思路: 1.开机自启,自然是需要用到注册表,我们需要把程序添加到电脑的注册表中去 2.记住密码,自动登录,开机自启,在页面的呈现我们都使用复选框按钮来呈现 3.数据持久化,不能是数据库,可以是sq ...

  5. Log4j2日志框架集成Slf4j日志门面

    1.说明 本文介绍使用日志门面Slf4j打印日志, 底层日志实现使用Log4j2框架, 方便以后切换底层日志实现, Log4j2可以替换成Logback等. 2.依赖管理 在pom.xml依赖管理中导 ...

  6. 浅议像素化与体素化Part.1——平面图形像素化

    什么是像素化 学计算机的人往往都比较清楚图形和图像的区别,而且往往能够从数据结构的角度理解这两者的区别,一般来说,图形是由几何空间中的基本图元所组成,表现为用外部轮廓线条勾勒成的矢量图.例如由计算机绘 ...

  7. CSS 表格基本使用 案例

    知识点普及: 表格是html中经常使用到的,简单的使用可能很多人都没问题,但是更深入的了解的人恐怕不多,下面我们先来看一下如何使用. <table>是<tr>的上层标签 < ...

  8. 基于CentOS7.x gitlab环境搭建,卸载,汉化 --汉化篇

    gitlab环境搭建,卸载,汉化--汉化篇 注意gitlab的版本需和汉化版本一致 安装git yum install -y git 下载最新的汉化包 cd git clone https://git ...

  9. [Flask] Flask问题集(后端模板渲染项目)

    1.redirect和render_template的区别? redirect:重定向,会改变url render_template:模板渲染,用模板来渲染当前页,不会改变url 2.关于 'g' 对 ...

  10. spring boot热部署 -- 实现 后端java热更新 -- 详细操作 【idea 的 JRebel破解】

    1.前言 上一随笔写了如何使得spring boot热更新前端 ,但后端java部分无法热更新. 对于Java热更新,以前常使用  springloaded  ,但是缺点 和bug很多 无法实现真正意 ...