今天学习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. 从壹开始微服务 [ DDD ] 之七 ║项目第一次实现 & CQRS初探

    前言 哈喽大家周五好,我们又见面了,感谢大家在这个周五读我的文章,经过了三周的时间,当然每周两篇的速度的情况下,咱们简单说了下DDD领域驱动设计的第一部分,主要包括了,<项目入门DDD架构浅析& ...

  2. 从壹开始前后端分离[.netCore 不定期 ] 36 ║解决JWT自定义中间件授权过期问题

    缘起 哈喽,老张的不定期更新的日常又开始了,在咱们的前后端分离的.net core 框架中,虽然已经实现了权限验证<框架之五 || Swagger的使用 3.3 JWT权限验证[修改]>, ...

  3. Linux性能评估工具

    目录 介绍 负载:uptime 查看内核的信息: dmesg 查看内存状态: free.vmstat free: 查看内存,已用内存,剩余内存.交换分区等 vmstat:显示虚拟内存状况的信息. 查看 ...

  4. 分析 js构造函数：对象方法 、类方法 、原型方法

    构造函数方法有对象方法.类方法.原型方法,这些方法在什么时候可以调用,什么时候不能调用,为什么? function Func(name){ this.name=name; this.ff=functi ...

  5. MyBatis-plus二级缓存使用

    MyBatis二级缓存使用 注意点: 在最新的3.x版本,实现二级缓存的配置也有了一些改变. 官方建议在service使用缓存,但是你也可以直接在mapper层缓存,这里的二级缓存就是直接在Mappe ...

  6. golang标准库 context的使用

    本文索引 问题引入 context包简介 示例 问题引入 goroutine为我们提供了轻量级的并发实现,作为golang最大的亮点之一更是备受推崇. goroutine的简单固然有利于我们的开发,但 ...

  7. Innosetup 设置文件的相对路径

    在使用innosetup自动化打包的过程中,如果打包配置文件要随代码一起提交,则需要将打包文件改为相对路径,以便在其它端也可以直接打包,而不需要再次修改文件路径参数. 添加自动化打包文件 1. 添加b ...

  8. 鼠标事件以及clientX、offsetX、screenX、pageX、x的区别

    鼠标事件 鼠标事件有下面这几种: 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 ...

  9. Ant Design按需加载

    不eject情况下配置antd按需加载 1.安装 react-app-rewired yarn add react-app-rewired 2. 项目根目录下新建 config-overrides.j ...

  10. 一起学Android之ListView

    本文以一个小例子,简述Android开发中ListView的相关应用,仅供学习分享使用. 概述 ListView是一个显示可滚动项目列表的视图组(view group),列表项通过适配器(Adapte ...