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. PHP 中的CURL 模拟表单的post提交

    废话不多说啦,直接上代码: <?php $data = ['username'=>'乔峰','skill'=>'擒龙手']; $headers = array('Content-Ty ...

  2. Spring Boot 整合 elk

    一.elk 简介 Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索引副本机制,restful风格接口,多数据源,自动搜索负载等. Logstas ...

  3. SpringBoot 整合 apollo

    简介 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理场景 ...

  4. SpringMVC页面向Controller传参

    关于SpringMVC页面向Controller传参的问题,看了网上不少帖子,大多总结为以下几类: 1.直接把页面表单中相关元素的name属性对应的值作为Controller方法中的形参. 这个应该是 ...

  5. Python re 模块

    Python re 模块 TOC 介绍 作用 正则表达式语法 贪婪和非贪婪 普通字符和特殊字符 分组(比较重要) re modul level 方法 正则表达式对象 匹配对象 常用例子 注意事项 Ja ...

  6. 深海中的STL—nth_element

    如果让你求区间第\(k\)大,你会怎么做呢? 主席树?确实是个不错的选择(不过像我这种垃圾还是乖乖打暴力吧) 在c++的stl库中,提供了nth_element这样一个函数 它的用法是nth_elem ...

  7. 【20190407】JavaScript-indexOf方法解析

    在JavaScript中,字符串类型String和数组类型Array都有indexOf()方法,虽然他们的作用都是返回传入元素在指定字符串或数组中的位置,但他们之间还是存在着一点点不同. Str.in ...

  8. win10系统下安装MySQLdb和pymysql

      (1)使用的是Python3.6,想要使用MySQLdb, 需要先在https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysqlclient中下载相应版本的包 ...

  9. PHP如何实现在数据库随机获取几条记录

    本文实例讲述了PHP实现在数据库百万条数据中随机获取20条记录的方法.PHP实例分享给大家供大家参考,具体如下: 为什么要写这个? 在去某个公司面试时,让写个算法出来,当时就蒙了,我开发过程中用到算法 ...

  10. mysql免安装版初次使用

    在自己电脑上安装一个mysql数据库并启动,碰到一些问题,总结一下 1.下载免安装版mysql数据库,百度下载了了5.7.25版本 2.在bin文件夹下找到my-defaults.ini文件,我这没有 ...