今天学习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. Jason Wang:记录自己所想所得（第一次作业）

    这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 我在这个课程的目标是 学会现代软件工程的思想,运用到实际中去 这个作业在哪个具体方面帮助我实现目标 ...

  2. Elasticsearch之索引模板index template与索引别名index alias

    为什么需要索引模板? 在实际工作中针对一批大量数据存储的时候需要使用多个索引库,如果手工指定每个索引库的配置信息(settings和mappings)的话就很麻烦了. 所以,这个时候,就存在创建索引模 ...

  3. service相关

    本篇仍以问题为驱动 一.什么时Service? Service是Android程序中四大基础组件之一,它和Activity一样都是Context的子类,只不过它没有UI界面,是在后台运行的组件.Ser ...

  4. springboot~jpa个性化数据操作接口

    jap是个全能仓储 jap把很多数据库访问都封装了,并且提交了默认的一切数据方法签名的约定,大家按着约定走,可以不写SQL语句,而如果比较复杂的情况,也需要写SQL,这里我们介绍一下查询和修改的实例方 ...

  5. 【Python3爬虫】斗鱼弹幕爬虫

    在网上找到了一份斗鱼弹幕服务器第三方接入协议v1.6.2,有了第三方接口,做起来就容易多了. 一.协议分析 斗鱼后台协议头设计如下: 这里的消息长度是我们发送的数据部分的长度和头部的长度之和,两个消息 ...

  6. API接口通讯参数规范

    通常在很多的公司里面,对于接口的返回值没做太大规范,所以会比较常看到各个项目各自定义随意的返回值,比如以下情况: 1. 直接返回bool值(True或者False) 2. 返回void,只要不是异常信 ...

  7. 【大数据安全】Kerberos集群安装配置

    1. 概述 Kerberos是一种计算机网络认证协议,它允许某实体在非安全网络环境下通信,向另一个实体以一种安全的方式证明自己的身份.它也指由麻省理工实现此协议,并发布的一套免费软件.它的设计主要针对 ...

  8. GoLang simple-project-demo-02

    GoLang 有很多种数据类型:字符型,整型,浮点型,布尔型.下面是基础例子: package main import "fmt" func main() { fmt.Printl ...

  9. C# Lambda表达式和linq表达式 之 匿名对象查询接收

    很多小伙伴都用过Lambda表达式和linq表达式,用起来也得心应手,但是有的小伙伴 对匿名对象的查询与接收比较迷茫,(没有定义相应的实体),怎么在where()里面进行 条件筛选呢?常规用法我就不说 ...

  10. WPF ResourceDictionary 主题资源替换（一）

    当我们需要在程序中替换主题,更换另一套背景.颜色.样式时,如何在不修改资源Key值,直接替换呢? 问题&疑问 1. Key值冲突 同一ResourceDictionary中,不可以使用相同Ke ...