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. IntelliJ IDEA如何导入Gradle项目

    最近学习Gradle,本文来重点介绍一下,如何使用IntelliJ IDEA导入`Gradle项目的一种方法. 选择菜单栏的File->Open. 在打开的窗口选择对应Gradle项目的buil ...

  2. hdu 1025 n*logn最长上升子序列

    /* TLE */ #include <iostream> #include <cstdio> #include <cstring> using namespace ...

  3. T-SQL还有个内置方法NULLIF()

    declare @cypic varchar if (NULLIF(@cypic, '') IS NOT NULL) begin print 1 end else begin print 2 end ...

  4. t4-editor使用方法 Visual T4

    原文发布时间为:2011-05-17 -- 来源于本人的百度文章 [由搬家工具导入] http://visualstudiogallery.msdn.microsoft.com/40a887aa-f3 ...

  5. JQuery基础 学习的一些例子以及手册

    原文发布时间为:2009-12-23 -- 来源于本人的百度文章 [由搬家工具导入] 不多说，直接下载。。。 下载：http://www.xmaspx.com/Services/FileAttachm ...

  6. js5：框架的使用，使框架之间无痕连接

    原文发布时间为:2008-11-08 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <base target="js4" ...

  7. UVALive 6514:Crusher’s Code(概率dp)

    题目链接 https://icpcarchive.ecs.baylor.edu/external/65/6514.pdf 题意:给出n个数(n<8) 求这n个数分别两个程序排成有序时,程序的期望 ...

  8. 泛型数组 + 记录类型 + Json 之间的转换

    unit Unit3; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  9. Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果

    Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...

  10. AC日记——石子归并 51nod 1021

    石子归并 思路: 经典动态规划——归并类问题: 我们把状态划为n个,即1-n的n个长度为n个状态: 那么,每个长度为i的状态都可以由i-1个长度为i-1的状态推出: 所以,dp转移方程: dp[i][ ...