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. 对类的理解（c++）

    介绍目录: 1.类成员 1.1 成员函数 1.2 构造函数 1.2.1 对构造函数的理解 1.2.2成员初始化列表 1.2.3必须使用成员初始化列表的几种情况 1.2.4对于拷贝构造函数的参数是一个引 ...

  2. android ScrollView 控制行数

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

  3. Oracle JDBC驱动安装到Maven本地仓库

    Oracle JDBC驱动因为授权问题,没有放到Maven的中央仓库里面,当然了,阿里云的镜像也没有了.所以要从Oracle官网下载驱动: 注意下载ojdbc6.jar  因为这个JDK1.8才能用. ...

  4. [转] 分组排序取前N条记录以及生成自动数字序列，类似group by后 limit

    前言:        同事的业务场景是,按照cid.author分组,再按照id倒叙,取出前2条记录出来.        oracle里面可以通过row_number() OVER (PARTITIO ...

  5. Linux 驱动开发

    linux驱动开发总结(一) 基础性总结 1, linux驱动一般分为3大类: * 字符设备 * 块设备 * 网络设备 2, 开发环境构建: * 交叉工具链构建 * NFS和tftp服务器安装 3, ...

  6. vscode + gradle 创建 java 项目 - java language server无法启动

    1.在系统上安装一个版本的gradle,用`gradle init --type java-application`创建一个默认的java项目,假设项目目录是hellojava 2.vscode写ja ...

  7. extjs ajax 同步 及 confirm 确认提示框问题

    //上传文件 uploadModel: function() { if(Ext.getCmp('exup').getForm().isValid()) { var ssn = this.upPanel ...

  8. 【Unity】项目工程源码

    Unity开发者俱乐部 http://blog.csdn.net/dingxiaowei2013/article/details/50605208 游戏蛮牛 9秒社团 6m5m raywenderli ...

  9. HTTP缓存及其合理使用

    以前以为HTTP缓存是个简单的事,项目中遇到后才发觉关于缓存实践有挺深的学问. from几篇文章详见: 使用 HTTP 缓存:Etag, Last-Modified 与 Cache-Control 合 ...

  10. Netty 学习笔记（1）通信原理

    前言 本文主要从 select 和 epoll 系统调用入手,来打开 Netty 的大门,从认识 Netty 的基础原理 —— I/O 多路复用模型开始.   Netty 的通信原理 Netty 底层 ...