今天学习Vue到循环那里，表示真是不能理解Vue的反人类设计

具体看代码吧！

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

 </head>

 <body>

 <div id="app">

   <ul>

     <li v-for="(value, key) in object">

     {{ key }} : {{ value }}

     </li>

   </ul>

 </div>

 <script>

 new Vue({

   el: '#app',

   data: {

     object: {

       name: '菜鸟教程',

       url: 'http://www.runoob.com',

       slogan: '学的不仅是技术，更是梦想！'

     }

   }

 })

 </script>

 </body>

 </html>

以上是菜鸟教程上的Vue教程的代码，真没想到循环遍历键值对的结构时，Vue要先value后key，恰恰和人们平常的习惯相反！所以以后一定要记得Vue遍历此类结构时，一定是要先value后key，以免出错！

Vue中循环的反人类设计的更多相关文章

  1. vue中循环时动态绑定值

    在vue项目中,有很多需要动态循环绑定的场景,在未知绑定数量的情况下只能动态生成绑定值 1.首先在data中定义一个对象,我在项目中时循环绑定下拉框,所以定义了一个selectVal = {} 2.在 ...

  2. Vue v-for使用 vue中循环输出数据

    v-for的使用: 代码: <!doctype html> <html lang="en"> <head> <meta charset=& ...

  3. Vue 中循环绑定v-module表单

    子组件有一个列表要做输入验证 <template> <div> <el-form :model="value" ref="numberVal ...

  4. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  5. VUE中登录密码显示与隐藏的最简设计——基于iview

    目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...

  6. Python 的缩进是不是反人类的设计？

    前些天,我写了<Python为什么使用缩进来划分代码块?>,文中详细梳理了 Python 采用缩进语法的 8 大原因.我极其喜欢这种简洁优雅的风格,所以对它赞美有加. 然而文章发出去后,非 ...

  7. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  8. vue中动态循环model

    vue动态循环model与angular有所不同,angular直接定义一个数组,然后传入循环列表的index即可. 而vue不仅需要定义一个数组,还需要通过接口读出循环的数组长度,然后在create ...

  9. Vue中的循环以及修改差值表达式

    0828自我总结 一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 & ...

随机推荐

  1. sersync自动化同步部署

    目录 0. 前提: 1. 部署rsync server服务 1.1 配置rsync配置文件 1.2 rsync配置文件说明: 1.3 创建密码文件修改权限600 1.4 创建提示文件(可有可无) 1. ...

  2. .net core自定义高性能的Web API服务网关

    网关对于服务起到一个统一控制处理的作用,也便于客户端更好的调用:通过网关可以灵活地控制服务应用接口负载,故障迁移,安全控制,监控跟踪和日志处理等.由于网关在性能和可靠性上都要求非常严格,所以针对业务需 ...

  3. 用消息队列和socket实现聊天系统

    前言:最近在学进程间通信,所以做了一个小项目练习一下.主要用消息队列和socket(UDP)实现这个系统,并数据库存储数据,对C语言操作不熟悉的可以参照我的这篇博客:https://www.cnblo ...

  4. Keras入门（四）之利用CNN模型轻松破解网站验证码

    项目简介   在之前的文章keras入门(三)搭建CNN模型破解网站验证码中,笔者介绍介绍了如何用Keras来搭建CNN模型来破解网站的验证码,其中验证码含有字母和数字.   让我们一起回顾一下那篇文 ...

  5. EF 外键不显示、如何让外键显示！增、删、改 操作时，外键不显示，只显示导航属性！

    一.问题描述:EF 外键不显示.如何让外键显示!增.删.改 操作时,外键不显示,只显示导航属性! EF 添加.增加.插入数据时,外键不显示! 二.解决方案:在根据数据库生成模型的时候,选中“在模型中” ...

  6. 编程心法 之什么是MVP What is MVP development?

    Minimal Value product(feather), 比如说,如果是一个新的Photoshop,那么增加图片亮度就是一个MVP. 想要看到更多玮哥的学习笔记.考试复习资料.面试准备资料?想要 ...

  7. Java中数组的插入，删除，扩张

    Java中数组是不可变的,但是可以通过本地的arraycop来进行数组的插入,删除,扩张.实际上数组是没变的,只是把原来的数组拷贝到了另一个数组,看起来像是改变了. 语法: System.arrayc ...

  8. 判断值是否为undefined

    可以使用 Ext.isDefined( value ) 这个函数, 也可以使用下面代码来进行实现: /** 判断传入的值是否 为undefined */ function isUndefined(va ...

  9. wordpress 角色权限

    自带多媒体库上传权限:edit_other_pages

  10. 利用IDisposable接口构建包含非托管资源对象

    托管资源与非托管资源 在.net中,对象使用的资源分为两种:托管资源与非托管资源.托管资源由CLR进行管理,不需要开发人员去人工进行控制,.NET中托管资源主要指"对象在堆中的内存" ...