今天学习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. Nginx执行阶段

    Nginx 介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器. Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮 ...

  2. Linux知识要点大全（第四章）

    第四章 文件管理 *主要内容 文件和目录的操作: ①创建 ②删除 ③拷贝 ④重命名(剪切) ⑤查看 一:目录的操作 回顾与目录相关的命令 ls  查看目录中的内容 .pwd 打印当前目录   .cd  ...

  3. Python：鲜为人知的功能特性（下）

    GitHub 上有一个名为<What the f*ck Python!>的项目,这个有趣的项目意在收集 Python 中那些难以理解和反人类直觉的例子以及鲜为人知的功能特性,并尝试讨论这些 ...

  4. 微信公众号开发C#系列-7、消息管理-接收事件推送

    1.概述 在微信用户和公众号产生交互的过程中,用户的某些操作会使得微信服务器通过事件推送的形式通知到开发者在开发者中心处设置的服务器地址,从而开发者可以获取到该信息.其中,某些事件推送在发生后,是允许 ...

  5. JCE安装使用报错

    "description":"No key was installed for encryption service","status":& ...

  6. Jetson Nano Developer Kit

    The Jetson Nano Developer Kit is an AI computer for learning and for making. ​ 一个推理框架,用于部署模型到嵌入式设备. ...

  7. mysql-8.0 安装教程（自定义配置文件，密码方式已修改）

    下载zip安装包: MySQL8.0 For Windows zip包下载地址:https://dev.mysql.com/downloads/file/?id=476233,进入页面后可以不登录.后 ...

  8. 学习经验分享（最近听了一节Java公开课）

    最近听了一节Java公开课,讲的Tomcat8.0的,老师分享的学习方法很好, 时间和精力要用对地方 1.学习一个知识的广度和深度,先学主要的主流的,不要学了很多不该学,没必要学的东西 2.要花时间总 ...

  9. MySQL字段操作与数据处理

    一,对字段的操作 1.拼接字段:Concat()函数 多数DBMS使用 + 或者 || 来实现拼接,而MySQL使用 Concat() 函数来实现拼接. 实例: Concat()函数拼接时加上的字符需 ...

  10. Web前端-Ajax基础技术(上)

    Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程. ajax发送 ...