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. CI在nginx环境下去掉url中的index.php

    在nginx环境下CI框架默认URL规则访问不了,出现500错误,如: http://blog.php230.com/index.php/keywords 今天在服务器配置CI框架环境时,去除URL中 ...

  2. Struts2,get/set 自动获取/设置数据ActionSupport 类

    主页:http://struts.apache.org/在用户请求和模块化处理方面以及页面的展现这块,Struts2 发挥了强大的作用:相对于传统的Jsp+Servlet 模式,Struts2 更适合 ...

  3. OOP & DOM

    OOP & DOM let Dom = Dom || {}; Dom = { checkValType(val) { let typeString = Object.prototype.toS ...

  4. BZOJ 1051：[HAOI2006]受欢迎的牛（强连通分量）

    受欢迎的牛Description每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这种关系是具有传递性的,如果A认为B受欢迎,B认为C受欢迎,那么 ...

  5. poj 1795 DNA Laboratory

    DNA Laboratory Time Limit: 5000MS   Memory Limit: 30000K Total Submissions: 2892   Accepted: 516 Des ...

  6. 【CF1068C】Colored Rooks（构造）

    题意: 思路: #include<cstdio> #include<cstring> #include<string> #include<cmath> ...

  7. C#可选参数与具名参数

    可选参数 static void test1() { func1("A"); func1(); Console.ReadKey(); } ) { Console.WriteLine ...

  8. centOS 7 安装java sdk 并测试是否安装成功

    CentOS 6.X 和 7.X 自带有OpenJDK runtime environment  (openjdk).它是一个在linux上实现开源的Java 平台. 安装方式: 1.输入以下命令,以 ...

  9. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---15

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  10. pip源配置

    1.使用配置文件配置文件[global]trusted-host=mirrors.aliyun.comindex-url=http://mirrors.aliyun.com/pypi/simple/ ...