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. C#杂记-隐式类型的局部变量

    基础知识:方法中声明的变量,叫局部变量 普通局部变量:有明确数据类型. string name; 隐式类型的局部变量:使用“var”代替明确的数据类型. var name = "abc&qu ...

  2. Hibernate框架笔记01_环境搭建_API_CRUD

    目录 1. Hibernate框架的概述 1.1 什么是框架 1.2 经典三层架构 1.3 Hibernate框架 2 Hibernate入门 2.1 下载Hibernate的开发包 2.2 创建项目 ...

  3. loj#6074. 「2017 山东一轮集训 Day6」子序列(矩阵乘法 dp)

    题意 题目链接 Sol 设\(f[i][j]\)表示前\(i\)个位置中,以\(j\)为结尾的方案数. 转移的时候判断一下\(j\)是否和当前位置相同 然后发现可以用矩阵优化,可以分别求出前缀积和逆矩 ...

  4. 超级强大的socket工具ss，替代netstat

    1.结论:ss 命令比netstat 更强大,提供功能更多,并且性能更高. 2.显示当前系统的socket占用总体宏观情况. ss -s 当已创建的socket数过多时,已经说明系统配置存在问题. 3 ...

  5. 设置chrome浏览器背景颜色

    经常看博客,页面背景都是白色的居多,看久了眼睛就不适合了,决定修改chrome浏览器背景颜色,保护下自己的眼睛, 下载chrome 插件Stylish并安装,安装成功后chrome右上角有它的图标,点 ...

  6. [20190401]隐含参数_mutex_spin_count.txt

    [20190401]隐含参数_mutex_spin_count.txt --//上午做了一些测试关于semtimedop函数调用,发现自己上个星期在一些问题上理解错误.--//相关链接:--//htt ...

  7. power-virus

    http://0cx.cc/category/yunwei/ 介绍安全姿势 https://www.freebuf.com/articles/system/193557.html

  8. c/c++ 拷贝控制 右值与const引用

    拷贝控制 右值与const引用 背景:当一个函数的返回值是自定义类型时,调用侧用什么类型接收?? 1,如果自定义类型的拷贝构造函数的参数用const修饰了:可以用下面的方式接收. Test t2 = ...

  9. Burpsuite 之intruder

    首先工具:Burpsuite1.7,DVWA,火狐浏览器代理插件,火狐浏览器,密码字典(以下用Bp代指burpsuite) 启动Bp,启动DVWA,并打开本地代理功能 ​ 开启bp的拦截功能,并在dv ...

  10. 一篇文章教你如何用 Python 记录日志

    前言: 这篇文章是我copy别人的,但是个人认为讲的真的很细致,有原理有实例,不仅仅只教你如何使用日志更会叫你知道日志的原理,真的非常棒,虽然文章很长,也许你不会认认真真读完, 但是当你遇到问题时这篇 ...