v-for="(item,index) of hot"    //数组遍历

v-for="(item,key,index) of cities"   //对象遍历
//key 是对象的属性 item对应的属性值

 key值

 <div class="area" v-for="(item,key) of cities" :key="key">
<div class="title border-topbottom">{{key}}</div>
<div class="item-list">
<div class="item border-bottom" v-for="city of item " :key="city.id">{{city.name}}</div>
</div>
</div>

  

vue的v-for数组和对象的更多相关文章

  1. 仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大

    仵航说 Vue用replace修改数组中对象的键值或者字段名 仵老大 1.介绍 先看图 ​ 今天在项目中遇到了一个问题,例如我现在需要传一些数据到后端,数组例如是 let arr = [ {" ...

  2. Vue不能检测的数组变化 对象变化

    数组: 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时 ...

  3. vue的watcher 关于数组和对象

    数组 不能被监听到的情况 1.直接下标赋值(但对象直接修改原有属性值可以渲染视图,虽然也监听不到) 2.修改数组length 解决方法: this.$set(this.arr,index,val) p ...

  4. vue prop不同数据类型(数组,对象..)设置默认值

    vue prop 会接收不同的数据类型,这里列出了 常用的数据类型的设置默认值的写法,其中包含: Number, String, Boolean, Array,  Function, Object   ...

  5. 还原Vue.js的data内的数组和对象

    最近学习Vue.js发现其为了实现对data内的数组和对象进行双向绑定,将数组和对象进行了封装. 如下的对象 todos: [     {         id: 1,         title: ...

  6. 在vue中使用watch监听对象或数组

    最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...

  7. Vue 改变数组中对象的属性不重新渲染View的解决方案

    Vue 改变数组中对象的属性不重新渲染View的解决方案 在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到ja ...

  8. vue 数组和对象渲染问题

    vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...

  9. vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示

    vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示 https://cn.vuejs.org/v2/guide/class-and-sty ...

  10. Vue 使用数组和对象控制Class

    直接上代码: <!doctype html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. ipset可使iptables一次性封多个ip

    ipset是什么? ipset是iptables的扩展,它允许你创建 匹配整个地址集合的规则.而不像普通的iptables链只能单IP匹配, ip集合存储在带索引的数据结构中,这种结构即时集合比较大也 ...

  2. 数学集合:N Z Q R C

    整数:   Zahlen(德) 复数:  Complex number 实数:  Real number 自然数: Natural number 有理数: Quotient(德,"商&quo ...

  3. 代码问题: 【MatConvNet库编译】

    问题1: 老版本的MatConvNet在编译对cuDNN支持的时候,cuDNN的版本是2或者4比较好,官网有明确的描述. 比如我编译用了cuDNN 6.0的版本,在编译 nnconv_cudnn.cu ...

  4. spring-IOC容器(三)

    一.通过工厂方法配置Bean: .xml <!-- class属性:指向静态工厂方法的全类名 factory-method:指向静态工厂方法的名字 constructor-arg:如果工厂方法需 ...

  5. Go thrift使用举例

    thrift 最初是 facebook 开发使用的 rpc 通信框架,后来贡献给了 apache 基金会,出来得比较早,几乎支持所有的后端语言,使用非常广泛,是不可不知的一个网络框架. 和 grpc ...

  6. 阿里巴巴Java编码规范,来测测你能得多少分

    今年年初,<阿里巴巴Java开发手册>正式发布,阿里官方Java代码规范标准首次对外公开.手册发布之后在业界.学术界都获得了广泛的关注,仅微博浏览量就突破千万,下载访问量超过40万,多家媒 ...

  7. DRP端口描述

    DRP端口描述 1.信息来源 2.端口描述

  8. Python依赖打包发布详细

    http://www.cnblogs.com/mywolrd/p/4756005.html 将Python脚本打包成可执行文件   Python是一个脚本语言,被解释器解释执行.它的发布方式: .py ...

  9. InfluxDB 的UTC时间问题与简单的持续查询语句

    原文:https://blog.csdn.net/Vblegend_2013/article/details/80904275 最近项目中使用了时序数据库InfluxDB 各方性能也是蛮强大的.但是唯 ...

  10. java经典5种 FlowLayout 、BorderLayout、GridLayout、GridBagLayout、CardLayout布局

    Java 程序通过jvm可以很好的移植到其他平台上,但是java 生成的图形界面样式,在不使用布局的情况下,往往需要重新设定大小,才能在新的平台上调整到最佳样式.这是由于组件的最佳大小 往往是与平台相 ...