Vue: 用 key 管理可复用的元素
<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 管理可复用的元素的更多相关文章
- vue中使用key管理可复用的元素
1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...
- 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 ...
- 用key管理可复用元素
先看看不用key管理可复用元素的代码.Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处,那就是在切换input时不会清楚 ...
- vue学习笔记一:用Key管理可复用元素
vue为了高效的渲染元素,会尽可能的复用组件,而不是从头渲染,如下案例 <template> <div id="app"> <template v-i ...
- vue中key的作用
1.v-if中用key管理可复用的元素 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处.例如,如果你允许用户在不同的 ...
- 《Unity3D》通过对象池模式,管理场景中的元素
池管理类有啥用? 在游戏场景中,我们有时候会需要复用一些游戏物体,比如常见的子弹.子弹碰撞类,某些情况下,怪物也可以使用池管理,UI部分比如:血条.文字等等 这些元素共同的特性是:存在固定生命周期,使 ...
- Vue之状态管理(vuex)与接口调用
Vue之状态管理(vuex)与接口调用 一,介绍与需求 1.1,介绍 1,状态管理(vuex) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态 ...
- vue 之 key
key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes.如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法.使用k ...
- Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次
key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...
随机推荐
- 关闭vs的编译警告
现象:出现warning cxxxx.. 解决:项目,属性,C/C++,高级,禁用特定警告,把xxxx输入
- 剑指offer 05:用两个栈实现队列
题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 解题代码 import java.util.Stack; public class Solution{ ...
- JavaScript形而上的策略模式
什么是策略模式? 先看代码片段1. // 代码片段1 var bonus = new Bonus(); bonus.setSalary(10000); bonus.setStrategy(new pe ...
- js中实现截取数组的后几个元素作为一个新数组的方法
有时候我们会遇到这种需求,截取数组中后5个元素作为一个新数组,且顺序不能变.数组中的slice()方法和splice()方法都可以实现这样的操作. const arr = [1,2,7,2,6,0,3 ...
- java、maven、tomcat 环境变量配置
Linux 配置java.maven.tomcat 环境变量 打开 /etc/profile 在下面写上 # java env JAVA_HOME=/usr/local/tools/java (j ...
- dedecms 在模版页面获取当前栏目id
在模版中单独调用当前栏目id {dede:type}[field:ID /]{/dede:type} 在{dede:sql}中调用当前栏目id {dede:sql sql='Select * from ...
- mysql,Jdbc工具类,只需一条sql实现简单查询
import java.io.ByteArrayOutputStream; import java.io.IOException; import java.io.InputStream; import ...
- STL 小白学习(3) vector
#include <iostream> using namespace std; #include <vector> void printVector(vector<in ...
- gdb pretty printer for STL debug in Linux
Check your gcc version. If it is less than 4.7, you need use another printer.py file. Get the file f ...
- linux学习--目录处理命令