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. PHP找工作指南！

    本文章是小编经过58.前程无忧.智联招聘.51.拉勾网等招聘网站总结PHP开发工作所需技能的部分总结,如有不对或不全之处,还请多多提意见! 前端: 1.html(html5:加分项)+css+div+ ...

  2. MySQL误操作后如何快速恢复数据？

    摘要: 利用binlog闪回误操作数据. 基本上每个跟数据库打交道的程序员(当然也可能是你同事)都会碰一个问题,MySQL误操作后如何快速回滚?比如,delete一张表,忘加限制条件,整张表没了.假如 ...

  3. cf 843 B Interactive LowerBound [随机化]

    题面: 传送门 思路: 这是一道交互题 比赛的时候我看到了直接跳过了...... 后来后面的题目卡住了就回来看这道题,发现其实比较水 实际上,从整个序列里面随机选1000个数出来询问,然后从里面找出比 ...

  4. js复制到粘贴板

    http://www.cnblogs.com/52fhy/p/5383813.html(移动端有兼容性问题) 要页面加载完直接绑定事件,否则第一次点击是绑定事件,第二次才触发事件 移动端需要设置tex ...

  5. jQuery 之 验证表单

    简单的东西重复做,做多了之后,才能说熟能生巧. 做好一个精美的页面,固然是好,但是,一个页面除了写好之外,我们更需要的是将其功能完善.比如表单的验证,这只是众多工作之一.然后本次就以jQuery的va ...

  6. EnableViewState 属性

    原文发布时间为:2009-10-25 -- 来源于本人的百度文章 [由搬家工具导入] 指示是否在页请求之间保持视图状态。如果要保持视图状态，则为 true；否则为 false。默认值为 true。 自 ...

  7. [LeetCode] Linked List Cycle II 链表环起始位置

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. Foll ...

  8. HTTP Header中Accept-Encoding

    HTTP Header中Accept-Encoding 是浏览器发给服务器,声明浏览器支持的编码类型[1]  常见的有 Accept-Encoding: compress, gzip //支持comp ...

  9. error: expected class-name before '{' token（转）

    错误原因 1. 头文件引用的类中,结尾可能少了;  ,, 例如:class Cwj{}          忘记了以;结尾哦. 2. 引用的头文件的顺序先后相互冲突:例如:Msg类中包含了#includ ...

  10. APP漏洞扫描用地址空间随机化【转】

    转自:http://www.cnblogs.com/alisecurity/p/6141575.html 前言 我们在前文<APP漏洞扫描器之本地拒绝服务检测详解>了解到阿里聚安全漏洞扫描 ...