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 ScrollView 控制行数

    利用ScrollView 来控制textView 显示的行数 <ScrollView android:layout_width="fill_parent" android:l ...

  2. VS2017环境下安装AO10.2的方法

    软件版本 Visual Studio的全称.简称及版本号对应关系为: Microsoft Visual Studio 2002 VS2002 VC7.0 Microsoft Visual Studio ...

  3. laravel实战化项目之三板斧

    laravel实战化项目之三板斧 spring mvc 实战化项目之三板斧 asp.net mvc 实战化项目之三板斧 laravel是我工作10多年来见到的真正能称得上让phper从面条一样杂乱的代 ...

  4. NOIP2010普及组 导弹拦截

    导弹拦截 OJ地址: https://www.luogu.org/problemnew/show/P1158 http://codevs.cn/problem/1128/   题目描述 Descrip ...

  5. GPL、BSD、MIT、Mozilla、Apache、LGPL开源协议介绍

    BSD开源协议 BSD开源协议是一个给于使用者很大自由的协议.基本上使用者可以”为所欲为”,可以自由的使用,修改源代码,也可以将修改后的代码作为开源或者专有软件再发布. 但”为所欲为”的前提当你发布使 ...

  6. Scala 隐式（implicit）详解

    文章正文 通过隐式转换,程序员可以在编写Scala程序时故意漏掉一些信息,让编译器去尝试在编译期间自动推导出这些信息来,这种特性可以极大的减少代码量,忽略那些冗长,过于细节的代码. 1.Spark 中 ...

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

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

  8. Vue父子组件双向数据绑定

    [本文出自天外归云的博客园] 简介 Vue版本:2.9.6 Element版本:2.4.8 问题描述:子组件对Element中el-select进行封装,父组件中把选中的值selected和所有选项o ...

  9. U-BOOT2016.05 配置内存大小

    bootargs 里面有一个 mem 的参数,将这个配置 512M 便是将内存配置为 512M

  10. .NET Core Session的使用方法

    刚使用.NET Core会不习惯,比如如何使用Session:不仅需要引用相应的类库,还需要在Startup.cs里进行注册. 1.在你的项目上基于NuGet添加: install-package M ...