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. Android：困扰了我一个晚上的问题 Failed to resolve: com.android.support:recyclerview-v7.25.3.1

      为了解决这个问题,做了各种尝试: 1)重装sdk: 2)重装android studio: 最终发现是一个标点符号搞错了,如下:   而且通过查找这个问题,了解到: 1)sdk路径,<use ...

  2. 经纬度编码方法推荐-plus code简介

    今天罗孚为大家推荐一种经纬度编码的方法--plus code,原名open location code,是Google于2014年发明的,旨在将表示地理位置的经纬度通过算法推导成一个字符串. plus ...

  3. web调用本地exe应用程序并传入参数

    从网页中通过自定义URL Protocol调用本地程序,需要将协议写到注册表中.浏览器在解析到自定义URL Protocol之后,寻找注册表,通过注册表启动相应的程序并传入参数.协议里面需要记录本地程 ...

  4. py3下怎么用StringIO

    try: from StringIO import StringIO except ImportError: from io import StringIO

  5. .net core 2.0+superui +Dapper.SimpleCRUD+mysql+NLog

    **_ .net core 2.0+superui +Dapper.SimpleCRUD+mysql+NLog _** 前端框架 superui http://www.supermgr.cn/ 1.组 ...

  6. (七):处理MFC

    (一):简单介绍 为了可以在一个Winelib应用中使用MFC,你须要首先使用Winelib又一次编译MFC. 在理论上,你应该为Windows的MFC编写一个封装(怎样编写在后面介绍).可是,在实践 ...

  7. VS code配置go语言开发环境之自定义快捷键及其对应操作

    VS code 配置 自定义快捷键 及其对应操作   由于 vs code 的官方 go 插件不支持像 goland 一样运行当前 go 文件, 只能项目 或者 package 级别地运行, 因此有必 ...

  8. Spark 公共篇-InterfaceStability

    本章内容: 1.源码 InterfaceStability 类包含三个注解,用于说明被他们注解的类型的稳定性. /** * Annotation to inform users of how much ...

  9. Sublime Text3 运行 PHP 文件

    在 Zend Studio(12.5)下可以通过 Run(Ctrl + F11)把 PHP 程序的执行结果通过 Debug Output 显示在 IDE 中,这样比开启 Server,再打开浏览器执行 ...

  10. C#中[WebMethod]的用法,aspx、ashx、asmx

    在.net 3.5的情况下 前台JQuery做Ajax的时候,服务器端 (1)可以调用aspx.cs 中声明带有[WebMehtod]的public static 的方法(不需要自己手动添加web.c ...