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. string[]转list<long>,List转字符串

    List转字符串,用逗号隔开 List<string> list = new List<string>();list.Add("a");list.Add(& ...

  2. BZOJ3122: [Sdoi2013]随机数生成器(BSGS)

    题意 题目链接 Sol 这题也比较休闲. 直接把\(X_{i+1} = (aX_i + b) \pmod P\)展开,推到最后会得到这么个玩意儿 \[ a^{i-1} (x_1 + \frac{b}{ ...

  3. Centos7 系统下搭建.NET Core2.0+Ｎginx+Supervisor+Mysql环境

    好记性不如烂笔头! 一.简介 一直以来,微软只对自家平台提供.NET支持,这样等于让这个“理论上”可以跨平台的框架在Linux和macOS上的支持只能由第三方项目提供(比如Mono .NET).直到微 ...

  4. Anaconda安装

    Anaconda安装时,不用单独安装python,直接安装anaconda里面就包含有对应版本的python以及各种python包,比如常用的pandas.matplotlib.numpy等.(作为一 ...

  5. 自定义一个全屏的AlertDialog。

    ........... final MyDialog dialog = new MyDialog(this); LayoutInflater inflater = getLayoutInflater( ...

  6. QT日志系统

    今天给大家介绍下QT里面的日志系统,直接上代码 #include <QApplication> #include <iostream> #include "ThorH ...

  7. 前后端交互实现（nginx,json,以及datatable的问题相关）

    1.同源问题解决 首先,在同一个域下搭建网络域名访问,需要nginx软件,下载之后修改部分配置 然后再终端下cmd  nginx.exe命令,或者打开nginx.exe文件,会运行nginx一闪而过, ...

  8. PM过程管理成熟度1级

    之前,我已经从项目实现的角度.企业管理诉求两方面,分析了PM的核心能力架构,以及其在过程管理方面的能力等级.接下来,Fancier凡奉信息会站在PM能力成长的角度,横向与纵向阐述每一成熟度等级PM的过 ...

  9. win7 64 位操作系统，进程System，PID为4，扫描连接局域网ip地址的139和445端口

    偶然发现电脑的System进程不间断扫描连接局域网内的其它IP对应的445和139端口,这是个问题. 上网搜索,立即关闭139端口的监听. 方法如下: 本地连接属性-TCP/IP属性-高级-WINS选 ...

  10. 关于MongoDB 固定集合（capped collection）的知识梳理

    一 . 什么是固定集合 MongoDB中有一种特殊类型的集合,值得我们特别留意,那就是固定集合(capped collection). 固定集合可以声明collection的容量大小,其行为类似于循环 ...