<div id="login">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username">
</template>
<template v-else="loginType==='email'">
<label>Email</label>
<input placeholder="Enter your email address" key="email">
</template>
<button v-on:click="typeClick">Toggle login type</button>
</div> <script>
var login = new Vue({
el: "#login",
data: {
loginType: "username"
},
methods: {
typeClick: function(){
return this.loginType === "username"?this.loginType="email":this.loginType="username"
}
}
})
</script>

Vue: 用 key 管理可复用的元素的更多相关文章

  1. vue中使用key管理可复用的元素

    1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...

  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管理可复用元素

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

  5. vue中key的作用

    1.v-if中用key管理可复用的元素  Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处.例如,如果你允许用户在不同的 ...

  6. 《Unity3D》通过对象池模式,管理场景中的元素

    池管理类有啥用? 在游戏场景中,我们有时候会需要复用一些游戏物体,比如常见的子弹.子弹碰撞类,某些情况下,怪物也可以使用池管理,UI部分比如:血条.文字等等 这些元素共同的特性是:存在固定生命周期,使 ...

  7. Vue之状态管理(vuex)与接口调用

    Vue之状态管理(vuex)与接口调用 一,介绍与需求 1.1,介绍 1,状态管理(vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态 ...

  8. vue 之 key

    key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes.如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法.使用k ...

  9. Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次

    key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...

随机推荐

  1. JS设计模式(6)命令模式

    什么是命令模式? 定义:将一个请求封装成一个对象,从而使您可以用不同的请求对客户进行参数化. 主要解决:在软件系统中,行为请求者与行为实现者通常是一种紧耦合的关系,但某些场合,比如需要对行为进行记录. ...

  2. day05数据类型,数字类型,字符串类型,字符串的操作方法,列表类型的操作方法,可变类型与不可变类型

    复习 ''' 流程控制 1.顺序结构.分支结构.循环结构 2.if分支结构 if 条件: 代码块 elif 条件: 代码块 else: 代码块 # 可以被if转换为False:0 | '' | Non ...

  3. 事件Event实现消费者模型

    import timeimport randomfrom multiprocessing import Process,Queue def consumer(q,name): while True: ...

  4. JavaScript(数组、Date、正则)

    数组 创建数组 // 一.自变量创建数组 // 1-通过字面量创建一个空数组 var arr1 = []; console.log(arr1) console.log(typeof arr1); // ...

  5. jsp/servlet学习一之servlet初窥

    Java Servlet技术简称Servlet技术,是java开发web应用的底层技术.Servlet是一个java程序,一个servlet应用有一个或多个Servlet程序.jsp页面会被转换和编译 ...

  6. tensorflow中batch normalization的用法

    网上找了下tensorflow中使用batch normalization的博客,发现写的都不是很好,在此总结下: 1.原理 公式如下: y=γ(x-μ)/σ+β 其中x是输入,y是输出,μ是均值,σ ...

  7. ubuntun 18.04 安装和配置mysql数据库

    一:更新镜像源 sudo apt-get update 二:下载数据库 sudo apt-get install mysql-server-5.7 sudo apt-get install mysql ...

  8. Spring中使用Redis

    普通使用Redis的方法很简单,前面的文章也有讲解,这篇文章主要就是讲解通过注解的方式实现Spring和Redis的整合.这里我们创建了3个类:1.Config 全局配置类,相当于xml配置文件2.R ...

  9. c3p0 操作

    E3p0连接池 c3p0-config.xml c3p0-config.xml(必须叫这个名字),然后必须放在工程目录的src下面 注意:c3p0里面可以配置多个连接信息,可以给每个配置起个名字,这样 ...

  10. Flask之SQLAlchemy,flask_session以及蓝图

    数据库操作 ORM ORM 全拼 Object-Relation Mapping,中文意为 对象-关系映射.主要实现模型对象到关系数据库数据的映射 优点 : 只需要面向对象编程, 不需要面向数据库编写 ...