1、概述

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

key解决上述问题之外的情景：这两个元素是完全独立的，不要复用它们。

2、示例

<!DOCTYPE html>

<html lang="zh">

    <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>vue中使用key管理可复用的元素</title>

    </head>

    <body>

        <div id="root">

            <template v-if="loginType === 'username'">

                <label>Username</label>

                <input placeholder="Enter your username" key="username-input">

            </template>

            <template v-else>

                <label>Email</label>

                <input placeholder="Enter your email address" key="email-input">

            </template>

            <button @click="toggleLoginType">Toggle login type</button>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">

            var vm = new Vue({

                el: '#root',

                data: {

                    loginType: 'username'

                },

                methods: {

                    toggleLoginType: function() {

                        return this.loginType = this.loginType === 'username' ? 'email' : 'username'

                    }

                }

            });

        </script>

    </body>

</html>

每次切换时，输入框都将被重新渲染。

vue中使用key管理可复用的元素的更多相关文章

  1. Vue: 用 key 管理可复用的元素

    <div id="login"> <template v-if="loginType === 'username'"> <labe ...

  2. ch6-条件渲染（v-if v-else v-else-if key管理可复用元素 v-show ）

    1 v-if 1.1 简单使用 <h1 class="h1" v-if="ok">yes</h1> <script> var ...

  3. 用key管理可复用元素

    先看看不用key管理可复用元素的代码.Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处,那就是在切换input时不会清楚 ...

  4. vue中：key 和react 中key={} 的作用，以及ref的特性？

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  5. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  6. Vue中的key到底有什么用？

    key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确.更快速 diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行 ...

  7. vue中在页面渲染完之后获取元素（否则动态渲染的元素获取不到）

    两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...

  8. vue学习笔记一：用Key管理可复用元素

    vue为了高效的渲染元素,会尽可能的复用组件,而不是从头渲染,如下案例 <template> <div id="app"> <template v-i ...

  9. vue 中$index $key 已经移除了

    https://cn.vuejs.org/v2/guide/migration.html#index-and-key-移除 之前可以这样: 1 2 3 4 5 6 <ul id="ex ...

随机推荐

  1. springboot添加事务

    (转自:http://www.cnblogs.com/xingzc/p/6029483.html) 什么是事务? 我们在开发企业应用时,对于业务人员的一个操作实际是对数据读写的多步操作的结合.由于数据 ...

  2. table单元格内容过多换行显示

    <table class="am-table am-table-striped am-table-hover table-main am-table-compact " st ...

  3. DOM中的节点属性

    摘抄自:http://www.imooc.com/code/1589 nodeName 属性: 节点的名称,是只读的. 1. 元素节点的 nodeName 与标签名相同 2. 属性节点的 nodeNa ...

  4. 【转】lightmap

    Shader "Diffuse Lightmap" { Properties { _MainTex ("Texture 1", 2D) = "whit ...

  5. 秀秀的照片（photo）

    秀秀的照片(photo) 题目描述 华华在和秀秀视频时有截很多图.华华发现秀秀的每一张照片都很萌很可爱.为什么会这样呢?华华在仔细看过秀秀的所有照片后,发现秀秀的照片都具有一个相同的性质. 设秀秀的分 ...

  6. Linux下调试段错误 (gdb,core,ulimit)

    Linux环境下经常遇到某个进程挂掉而找不到原因,我们可以通过生成core file文件加上gdb来定位. (1)首先 在makefile中要增加编译调试选项 -g,才可以利用下面的gdb来调试 gc ...

  7. Kubectl管理工具

    1.常用指令如下 运行应用程序 [root@manager ~]# kubectl run hello-world --replicas=3 --labels="app=example&qu ...

  8. css iframe边框去掉

    [IE6以下] iframe边框通过css设定在FF下正常在ie下却还存在边框,通过在iframe标签内部设置属性 frameborder="no" border="0& ...

  9. HTML5 录音的踩坑之旅

    开篇闲扯 前一段时间的一个案子是开发一个有声课件,大致就是通过导入文档.图片等资源后,页面变为类似 PPT 的布局,然后选中一张图片,可以插入音频,有单页编辑和全局编辑两种模式.其中音频的导入方式有两 ...

  10. scrapy实战

    采用scrapy实现对股票网站的爬取 功能描述: 技术路线:scrapy 目标:获取上交所和深交所所有股票名称和交易信息并存储 实例编写: 步骤1:建立工程和spider爬虫模板 步骤2:编写spid ...