今天学习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. RecyclerView实现一个页面有多种item，每个item有多个view，并且可以让任意item的任意view自定义监听，通过接口方法进行触发操作

    百度了很多贴子,看着大佬的博客,模仿尝试,最终都是以失败告终,api可能版本不一样, 毕竟博客大佬都是7~8前写的,日期新点的都是好几年前了,多次尝试,还是报出莫名其妙的错. 哎,忧伤. 翻阅各种资料 ...

  2. 从零开始学习PYTHON3讲义（十四）写一个mp3播放器

    <从零开始PYTHON3>第十四讲 通常来说,Python解释执行,运行速度慢,并不适合完整的开发游戏.随着电脑速度的快速提高,这种情况有所好转,但开发游戏仍然不是Python的重点工作. ...

  3. LindDotNetCore~职责链模式的应用

    回到目录 职责链模式 它是一种设计模块,主要将操作流程与具体操作解耦,让每个操作都可以设置自己的操作流程,这对于工作流应用是一个不错的选择! 下面是官方标准的定义:责任链模式是一种设计模式.在责任链模 ...

  4. Python编程从入门到实践笔记——if语句

    Python编程从入门到实践笔记——if语句 #coding=utf-8 cars=['bwm','audi','toyota','subaru','maserati'] bicycles = [&q ...

  5. 包、继承以及 LeetCode 27、28题

    1 package.import 和 import static 1.1 Package Java 引入了包(Package)机制,提供了类的多层命名空间,用于解决类的命名冲突.类文件管理问题.Jav ...

  6. nodejs异步转同步

    项目在微信环境开发,需要获取access_token进行授权登录和获取用户信息. 特意把这块功能拿出来封装一个自定义module module.exports = new Wechat(con.app ...

  7. Web 性能优化：Preload与Prefetch的使用及在 Chrome 中的优先级

    摘要: 理解Preload与Prefetch. 原文:Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级 作者:前端小智 Fundebug经授权转载,版权归原作者所 ...

  8. 获取元素CSS样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 超大文本文件浏览器Snaptext，支持不限制大小的文本文件浏览

    文本文件超过1G就很少有软件可以打开了,超过10G就只有有限的几个可以打开了,那20G.30G.100G呢? Snaptext超大文本浏览器,应该是世界上最快速的文本文件浏览器,它支持基本不限制大小的 ...

  10. Android Studio教程09-加载器Loader的使用

    目录 1.加载器特征 2. Loader API 3. 在应用中使用Loader 3.1. 启动加载器 3.2. 重启加载器 3.3. 使用LoaderManager回调 4. 实例: 访问用户联系人 ...