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. NLP第3章 中文分词技术

  2. table表格内容溢出处理

    直接在table标签加上  style="table-layout:fixed;word-wrap:break-word;"

  3. [dubbo] Dubbo API 笔记——配置参考

    schema 配置参考 所有配置项分为三大类 服务发现:表示该配置项用于服务的注册与发现,目的是让消费方找到提供方 服务治理:表示该配置项用于治理服务间的关系,或为开发测试提供便利条件 性能调优:表示 ...

  4. 【php】php5.0以上，instanceof 用法

    1.instanceof php官网:http://php.net/manual/zh/language.operators.type.php 2.instanceof 用于确定一个 PHP 变量是否 ...

  5. 【转】ASP.NET中验证控件的使用

    前言: 前几日,无奈用JS判断控件的有效性,发现的确是一件费力.费神的事情!特别是针对邮件格式.邮政编码等的关于正则表达式的JS验证(其中涉及正则表达式的比较等,较烦~).其实对于这些常用的控件有效性 ...

  6. Docker Mongo数据库开启用户认证

    一.启动mongo容器的几种方式 #简化版 docker run --name mongo1 -p 21117:27017 -d mongo --noprealloc --smallfiles #自定 ...

  7. Mac 解压zip文件错误：无法将"*.zip"解压缩到"" （错误 1-操作不被允许）

    错误提示: 无法将"*.zip"解压缩到"" (错误 1-操作不被允许)或者 解压缩失败 英文提示: "Unable to unarchive int ...

  8. 【20180111】【物流FM专访】贝业新兄弟李济宏：我们是如何做到大件家居B2C物流第一的？

    在2017年的双11中,贝业新兄弟承接了日日顺家装和卫浴行业的仓储和配送,上海仓和武汉仓双十一期间及时出库率为100%,KPI位列第一:此外,贝业新兄弟还是科勒18年以来中国区唯一的物流服务商以及宜家 ...

  9. 安装最新版RabbitMQ v3.7.13 以及基本配置

    之前用的老版本,新项目新气象,RabbitMQ也用最新版吧 首先打开官网:http://www.rabbitmq.com/install-rpm.html 先到右侧导航栏来看一下 : 第一个红框是指的 ...

  10. maven 使用 国内镜像的方法 解决依赖下载慢

    转自:http://blog.csdn.net/banqgg/article/details/55804569 Maven是当前流行的项目管理工具,但官方的库在国外经常连不上,连上也下载速度很慢.国内 ...