vue总是会复用页面上已经存在的dom，区别的方法是加上key就可以，还设有v-for时候的警告也是如此
key的作用是区别这条跟那条的。
<body>

    <div id="app">

       <div v-if='flag%2'>

           用户名：<input type="text"> 
// 用户名：<input type="text" key='password'> 
</div> <div v-else> password: <input type="password"> 当这个显示的时候， vue会拿 上面用户名那个input </div> <button @click='changeFlage'>click</button> </div> <script src="../vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { flag: 1 }, methods: { changeFlage: function(){ this.flag ++;  } } }) </script> </body>

vue中key的作用 v-for里警告 v-if的复用的更多相关文章

  1. vue中key的作用

    1.v-if中用key管理可复用的元素  Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处.例如,如果你允许用户在不同的 ...

  2. v-for中key的作用与原理

    一.虚拟DOM中key的作用 key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据新数据生成新的虚拟DOM,随后Vue会对新虚拟DOM与旧虚拟DOM的差异进行比较. 二.如何选择key 最好使 ...

  3. vue中 key 值的作用

    原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...

  4. vue中：key 和react 中key={} 的作用，以及ref的特性？

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  5. （转）Vue种key的作用

    https://blog.csdn.net/qq_41861679/article/details/80659278 https://cn.vuejs.org/v2/api/#key 其实不只是vue ...

  6. Vue中 key keep-alive

    keep-alive key <!DOCTYPE html> <html> <head> <title></title> <scrip ...

  7. vue中computed的作用以及用法

    在vue中computed是计算属性,主要作用是把数据存储到内存中,减少不必要的请求,还可以利用computed给子组件的data赋值. 参考地址:https://www.jianshu.com/p/ ...

  8. vue中moudles的作用及使用方法

    1.作用:vuex允许把store分割为模块,每一个模块都有自己的state,actions,getters,mutations甚至是嵌套一些子模块,从上到下进行同样方式的分割 在文件src中创建一个 ...

  9. vue中template的作用及使用

     先来看一个需求:下图div用v-for做了列表循环,现在想要span也一起循环,应该怎么做? 有3种方法可以实现 ①:直接用v-for对span也循环一次(该方法虽然可以使用,但不要用这种方式,因为 ...

随机推荐

  1. 具有相同名称 的类/接口已在使用。请使用类定制设置来解决此冲突。java调用第三方的webservice应用实例

    WSDLToJava Error: http://10.96.84.124:81/BTRPWebServiceForSMB/OnSMBOrderService.svc?xsd=xsd0 [0,0]: ...

  2. 02、创建RDD（集合、本地文件、HDFS文件）

    Spark Core提供了三种创建RDD的方式,包括:使用程序中的集合创建RDD:使用本地文件创建RDD:使用HDFS文件创建RDD. 1.并行化集合 如果要通过并行化集合来创建RDD,需要针对程序中 ...

  3. 自动化运维之PSSH

    1.PSSH简介 PSSH提供OpenSSH和相关工具的并行版本.包括pssh,pscp,prsync,pnuke和pslurp.该项目包括psshlib,可以在自定义应用程序中使用. pssh是py ...

  4. GOF提出的23种设计模式是哪些 设计模式有创建形、行为形、结构形三种类别 常用的Javascript中常用设计模式的其中17种 详解设计模式六大原则

    20151218mark 延伸扩展: -设计模式在很多语言PHP.JAVA.C#.C++.JS等都有各自的使用,但原理是相同的,比如JS常用的Javascript设计模式 -详解设计模式六大原则 设计 ...

  5. Windows安装VNC服务端

    下载VNC服务端 由于服务器在IDC机房,只能使用系统自带远程桌面连接到服务器进行安装VPC服务端 但在安装过程发现,如果是通过远程桌面连接到服务器进行安装,VNC Mirror Driver会报错无 ...

  6. 文档大师 在Win10 IE11下，文档集画面无法正常显示Word等Office文档的解决方法

    在文档集界面中显示Word文档,是文档大师的一个核心功能. 最近在 Win10 升级到最新版后,发现 无法正常显示Office 文档的问题. 一开始以为是Word版本问题,从2007升级到2016,问 ...

  7. 【翻译】Apache Shiro10分钟教程

    本文为翻译文,原文地址:http://shiro.apache.org/10-minute-tutorial.html 介绍 欢迎来到Apache Shiro的10分钟教程! 通过这个教程,你会明白一 ...

  8. （转）java术语（PO/POJO/VO/BO/DAO/DTO）

    转自:http://blog.csdn.net/gaoyunpeng/article/details/2093211 PO(persistant object) 持久对象在o/r 映射的时候出现的概念 ...

  9. Git Pro深入浅出（三）

    七.自己定义Git 前面已经阐述了Git基本的运作机制和使用方式,介绍了很多Git提供的工具来帮助你简单且有效地使用它.本部分将演示怎样借助Git的一些重要的配置方法和钩子机制,来满足自己定义的需求. ...

  10. js中文输入法字符串截断

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