vue使用v-if、v-else的复用问题(input体现)
时间:2021-10-11
本文章向大家介绍vue使用v-if、v-else的复用问题(input体现),主要包括vue使用v-if、v-else的复用问题(input体现)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 <body> 2 3 <div id="app"> 4 <span v-if="isChoose"> 5 <label for="username">账号登录</label> 6 <input type="text" name="" id="username" placeholder="账号" key="zh"> 7 </span> 8 <span v-else> 9 <label for="email">邮箱登录</label> 10 <input type="text" name="" id="email" placeholder="邮箱" key="yx"> 11 </span> 12 <button @click="btnClick">切换登录类型</button> 13 </div> 14 15 <script src="../ES6/vue.js"></script> 16 <script> 17 const app = new Vue({ 18 data() { 19 return { 20 isChoose: true 21 } 22 }, 23 methods: { 24 btnClick() { 25 this.isChoose = !this.isChoose 26 } 27 } 28 }).$mount('#app') 29 </script> 30 </body>
通过v-if控制的两种互斥的登录方式,在使用到input表单输入值后,此时切换登录方式,会存在input中内容不改变的现象
Vue出于性能的考虑,会尽可能的复用已经存在的元素,而不是创建新的元素。
这种情况下的input没有删除后重新创建,而是直接作为else中的input使用
想要解决这种情况,可以在input中加入key
原文地址:https://www.cnblogs.com/lay529/p/15395336.html
- 优化OEA中的聚合SQL
- Universal Image Loader for Android 使用实例
- 如何从 Ring Buffer 读取?
- OEA中的AutoUI重构(1) - Command自动生成
- 开源项目Universal Image Loader for Android
- android Universal Image Loader for Android 说明文档 (1)
- 修改android最小堆内存
- (转)ES6新特性概览
- 基于OEA框架的客户化设计(一) 总体设计
- 【致敬周杰伦】基于TensorFlow让机器生成周董的歌词(附源码)
- 关于Android N的那些事
- “节流函数”提高性能
- Mono 3.0.2 基于双工通信的WCF应用 Demo
- android的适配方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring Security 权限控制
- vue动态组件的用法
- elementUI中checekBox实现全选和反选以及实现在input中输入空格出现label分割
- centos 安装git
- centos 挂载硬盘
- centos 安装postgrep
- springboot集成PowerJob-openAPI和回调完整流程
- 使用 Redisson 实现的 redis 分布式锁在 SpringBoot 中的简单使用
- SpringBoot 的过滤器 Filter 配置
- CentOS 7 Redis 5.0.8 哨兵模式配置
- SpringBoot 项目的 Maven 多环境打包配置
- webRTC: 基于coturn项目的stun/turn服务器搭建
- 百度地图电子围栏功能
- opencv使用中出现的问题
- 人生苦短,我用k8s--------------Pod资源控制进阶管理