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. IIS8 不能在此路径中使用此配置节。如果在父级别上锁定了该节

    问题: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的(overrideModeDefault="Deny"),或者是通过包含 overr ...

  2. HDU6438 Buy and Resell 解题报告（一个有趣的贪心问题的严格证明）

    写在前面 此题是一个很容易想到的贪心题目,但是正确性的证明是非常复杂的.然而,目前网上所有题解并未给出本题贪心算法的任何正确性证明,全部仅停留在描述出一个贪心算法.本着对算法与计算机科学的热爱(逃), ...

  3. [国家集训队][bzoj2038] 小Z的袜子 [莫队]

    题面: 传送门 思路: 又是一道标准的莫队处理题目,但是这道题需要一点小改动:求个数变成了求概率 我们思考:每次某种颜色从i个增加到i+1个,符合要求的情况多了多少? 原来的总情况数是i*(i-1)/ ...

  4. 求和为s的连续正数序列

    输入一个正数是s,打印出所有和为s的连续正数序列(至少含有两个数).例如输入15,由于1+2+3+4+5=4+5+6==7+8=15,所有结果打印出3个序列1-5,4-6,7-8. 代码如下: voi ...

  5. 计数(count)

    计数(count) 题目描述 既然是萌萌哒 visit_world 的比赛,那必然会有一道计数题啦! 考虑一个 NN个节点的二叉树,它的节点被标上了 1∼N1∼N 的编号. 并且,编号为 ii的节点在 ...

  6. 【BZOJ 5038 不打兔子】

    Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 22  Solved: 8[Submit][Status][Discuss] Description 勤 ...

  7. Python 错误类型及解决方法

    SyntaxError: invalid syntax          表示“语法错误:不正确的语法” 检查代码的缩进,代码格式是否正确,Python的缩进一般为四个空格,tab键尽量不要用. In ...

  8. system权限无法访问外挂SD卡

    总结Android应用system权限无法访问SD卡问题 包括android1.6 解决方案http://hi.baidu.com/yunlongchn/item/7d6636d8547317ffca ...

  9. java递归处理文件夹和文件

    import java.io.File; /** * 文件综合使用示例 */ public class FileDelete { public static void main(String[] ar ...

  10. Playing with String（codeforces 305E）

    题意:刚开始你只有一个字符串每次能选择一个有的字符串 s,找到 i,满足s[i - 1] = s[i + 1],将其分裂成 3 个字符串s[1 · · · i - 1]; s[i]; s[i + 1 ...