Vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="app">

        <template v-if="type==='name'">

            <label>用户名：</label>

            <input type="text" placeholder="输入用户名">

        </template>

        <template v-else>

            <label>邮箱</label>

            <input type="text" placeholder="输入邮箱">

        </template>

        <button @click="handleToggleClick">切换输入类型</button>

    </div>

    <script>

        //input和label会被复用   不信你看控制台Elements    在用户名input输入内容后，点击button，会发现input的内容没有改变！！！！！

        var app=new Vue({

            el:'#app',

            data:{

                type:'name'

            },

            methods:{

                handleToggleClick:function(){

                    this.type=this.type==='name'?'mail':'name';

                }

            }

        })

    </script>

</body>

</html>

注意：：

可以使用添加key属性，取消元素的复用。（key值必须是唯一的！！！！！！！！）

vue.js实战——vue元素复用的更多相关文章

  1. vue.js实战——vue 实时时间

    created:实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用,需要初始化处理一些数据时会比较有用. mounted:el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里 ...

  2. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  3. vue.js 实战 todo list

    vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...

  4. Vue.js 实战总结

    最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...

  5. vue.js实战——购物车练习（包含全选功能）

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  6. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  7. 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站

    这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...

  8. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  9. vue.js实战(文摘)

    ---------------第1篇 基础篇 第1章 初始vue.js 第2章 数据绑定和第一个vue应用 第3章 计算属性 第4章 v-bind及class与style绑定 第5章 内置命令 第6章 ...

随机推荐

  1. Java开发笔记（十）一元运算符的技巧

    前面讲到赋值运算符的时候,提到“x = x+7”可以被“x += 7”所取代,当然Java编程中给某个变量自加7并不常见,常见的是给某变量自加1,就像走台阶,一般都是一级一级台阶地走,犯不着一下子跳上 ...

  2. Android开发——EditText的属性使用

    最近使用的EditText控件,有些属性不太清楚,做一下笔记   判断EditText中内容是否为空 EditText多行显示 android:inputType="textMultiLin ...

  3. 最小化的 Google Analytics 代码

    一个简单的代码段,用于跟踪网站上的网页浏览量,而无需添加外部库. 也适用于使用react和vue.js等单页应用程序. Before Google Tag Manager + Analytics =  ...

  4. 解决Windows下栈内存过小的问题

    本地是windows环境 这个需要对你的IDE进行更改 拿Dev-C++来说 加入一条编译命令就好 -Wl,--stack= 评测机是Windows环境 很简单 在你的代码前面加一行 #pragma ...

  5. nodejs+express+mongodb写api接口的简单尝试

    1:启动mongodb服务 我的mongoDB的安装目录:E:\mongoDB\bin,版本:3.4.9 打开cmd  -> e:(进入e盘) -> cd mongoDB/bin(进入mo ...

  6. 【English】二、It作为代词，可以代指什么

    it的用法 一.用作人称代词: 1.指代事物: — What’s this? — It’s a cat.2.指代人:常用于不知对方性别时,比如:询问敲门人或打电话时询问对方是谁,或者用来指代婴儿. ( ...

  7. C# 进程间通讯

    扩展阅读:http://www.cnblogs.com/joye-shen/archive/2012/06/16/2551864.html 一.进程间通讯的方式 1)共享内存 包括:内存映射文件,共享 ...

  8. ServiceStack.Redis连接阿里云redis服务时使用连接池出现的问题

    创建连接池 private static PooledRedisClientManager prcm = CreateManager(new string[] { "password@ip: ...

  9. 如何解决分配到Autoconfiguration IPV4 地址

    配置完服务器静态IP后,在CMD窗口中查看ip地址,发现是Autoconfiguration IPV4. 上网搜索了,是关于虚拟服务器的,但是我没有配置虚拟服务器,有点奇怪. 使用下面的教程,可以解决 ...

  10. Bootstrap -- 初见 Bootstrap

    Bootstrap -- 初见 Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. ...