<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. Kaggel比赛 : [Give Me Some Credit]

    通过预测在未来两年内某人将经历财务困境的可能性,改善信用评分的状态. Description 银行在市场经济中扮演着至关重要的角色.他们决定谁可以获得融资,以及什么条件,可以做出或破坏投资决策.为了让 ...

  2. 全局解释器锁GIL & 线程锁

    1.GIL锁(Global Interpreter Lock) Python代码的执行由Python虚拟机(也叫解释器主循环)来控制.Python在设计之初就考虑到要在主循环中,同时只有一个线程在执行 ...

  3. Linux——入门命令

    授课内容: 0.linux系统由来 linux各种常用命令以及对命令参数选项的熟悉: 1.目录操作命令([跳转:查看自己当下的位置-绝对路径:查看任何路径下的目录内容]pwd(Print Workin ...

  4. 微信小程序开发学习记录

    两天撸了一遍小程序的文档,跟网页相似,个人感觉是简化版.但是因为开放了很多微信自带的接口又使得部分功能开发起来相对方便 思维导图如下: 目前我的理解大概是这么个逻辑,以后深入学习后可能会有更改 跟着大 ...

  5. 利用python操作excel

    https://zhuanlan.zhihu.com/p/51292549 打开程序:https://segmentfault.com/q/1010000002441500

  6. English trip EM2-LP-4B At School Teacher:Russell

    课上内容(Lesson) Where is Loki a student?  Loki is in Meten, BaobaoStreet, Chengdu. What is he studying? ...

  7. postman管理收藏夹,批量执行接口

    ①创建一个新的收藏夹,在弹出的对话框中输入收藏夹的名称和描述然后点击Create按钮创建 ②保存接口请求到收藏夹或文件夹 注意:表单格式的request和二进制格式的request中包含的文件是不会被 ...

  8. php 按照中文字母名字排序,并把相应的头像显示出来

    //排序public function getFirstChar($s){ $s0 = mb_substr($s,0,3); //获取名字的姓 $s = iconv('UTF-8','gb2312', ...

  9. 数据分析库之matplotlib

    一.Matplotlib基础知识 Matplotlib中的基本图表包括的元素 x轴和y轴 axis 水平和垂直的轴线 轴标签 axisLabel 水平和垂直的轴标签 x轴和y轴刻度 tick 刻度标示 ...

  10. eslint详细配置

    vue-cli3按照官网教程配置搭建后,发现每次编译,eslint都抛出错误, 修改配置在 .eslintrc.js中修改   或者  关闭eslint 1.关闭eslint 直接注释掉package ...