切换登录时，清空input输入框

于 2024-02-02 11:25:34 发布
阅读量682 收藏 10
点赞数 15
分类专栏： uni-app/小程序 文章标签： 前端 vue.js javascript uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53221528/article/details/135989805
版权

 在uniapp登录页面时，会出现几种登录方式，当切换登录方式时，会出现input复用问题。像下面图中所示。

出现复用的原因是：Vue在进行Dom渲染时，出于性能考虑，会复用已经存在的元素，而不是重新创建新的元素。

解决方案：给每个input加上不同的key。

未加key时：

加key代码及效果：

不同登录方式加对应的key

 

Chemo辰陌
关注
  • 15
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp input 双向绑定 清空
carbonzhao的专栏
10-27 1万+
<input class="value-lable big-width" data-id="code" key="code" type="text" :value="stepData.code" placeholder="请输入" @blur="textFieldInputed" /> 代码如上，同学们注意观察，input动态绑定了:value来显示默认值，当你将，当你在textFieldInputed 方法内监听输入的文字是否有效时，就会出现问题。 如果有效，则输入的文本允许显示出来，.
uni-app清空input输入框内容
热门推荐
shijie
12-24 1万+
uni-app
uniapp使用from表单提交后清空input输入内容的正确方法
君笑尘的技术博客
03-29 8668
做小程序开发的时候，经常使用到from表单提交，但是提交后input输入的内容却没有办法清楚。 搜索了一下后发现大家在微信小程序原生开发的方案都是给input的value设置一个默认值inputName，然后在提交成功后，把inputName通过this.setData 设置为空 //直接将input值设置空 this.setData({ inputName: '' }) 但是在uniapp上这样做，并不会改变input输入的内容，尝试改用了: this.inputNam
uni-app中让input标签在点击时清空
qq_45401346的博客
04-23 9540
<input type="text" :value="inputValue" @focus="vauleEmpty"/> 1，动态的绑定value并为其将值设置为inputValue属性，因为默认的值是搜索商品名称或品牌 2,@fous属性是uni-app中方法，当input标签获得光标时，就会触发valueEmpty方法 methods:{ valueEmpty(e){ ...
uniapp中自定义带清除功能的input组件
qq_34553561的博客
05-31 5799
<template> <view class="flex-center-center input-wrap"> <view class="input-lable">{{lable}}</view> <input class="input-val" :type="type" :focus="focus" :value="value" :password="password" :disabled="disabled" :data-field.
uni-app多个输入框带清除按钮
weixin_39703839的博客
12-10 8217
<template> <view> <view class="uni-form-item uni-column"> <view class="title">多个输入框都带清除按钮</view> <view v-for="(item,index) in formList" :key="item.value" clas...
自定义EditText_密码明文切换_点击清空输入框
04-21
同时，我们还添加了一个`clearInput`方法，用于在点击小图标时清空输入框。 现在，你可以在其他布局文件中使用这个自定义的EditText，就像使用普通的EditText一样： ```xml android:id="@+id/password_input" ...
微信小程序---提交表单后清空输入框
03-29
最近有人问我提交表单后怎么把输入框的内容清空了。  这种方法不止一种， 1、可以用表单的重置功能。 按钮设置：   formType="reset">提交 form设置：   bindreset="formReset"> 表单重置时会触发reset事件，在...
js动态修改input输入框的type属性(实现方法解析)
10-26
总结来说，要动态修改`<input>`的`type`属性，尤其是在处理IE浏览器时，我们需要采用一些变通策略，如先删除元素再创建新元素，或者像上述例子中那样，利用两个不同的`<input>`元素来模拟类型切换。这种方法虽然增加...
vue实现输入框自动跳转功能
10-15
在Vue.js框架中，实现输入框自动跳转功能主要用于提高用户体验，使得用户在输入特定内容时，能够自动在多个输入框之间切换，无需手动点击或使用方向键。本实例主要展示了如何利用Vue的模板语法、事件监听器以及数据...
带删除按钮的输入框
06-09
模仿iphone输入框添加删除按钮,自定义editext
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
10-17
在用户切换输入建议列表时，可能会看到上一次的输入建议列表短暂地闪现，即使尝试清空`callback`中的数据数组也没有效果。这个问题实际上与数据更新和渲染的时机有关，而`debounce`参数可以解决这个问题。`debounce`...
使用uni-app开发的程序在PDA扫描后无法清空输入框的解决办法
YE_secoco的博客
10-25 2283
2020-10-24，这是一个周末。我本应该是躺在床上玩阴阳师的咸鱼。但是一想到我周一好像还得交付4个APP页面，我不得不从床上爬起来。 写着写着我头就开始疼起来了。因为我用uni-app开发的功能页面，在PDA扫描完之后，实际v-model绑定的值打印了一下确实是清空的，但是页面上仍然是显示着的，于是出于一条咸鱼的本能，我当然要寻求各位百度道友的帮助，果不其然还是有很多道友已经渡过此劫。于是我开心的荡起了代码。但是嘞，搬了半天代码还是不起作用，于是我心态崩了呀，看了一眼时间，已经23...
清空input的值
AinUser的博客
03-20 9776
&lt;input name="user" class="txtshort" id="user" value="输入手机号码或邮箱" /&gt;  $("#user").val(""); 清空ID为user的值；  
uniapp写小程序实现清除缓存（存储/获取/移除/清空）
最新发布
weixin_57031986的博客
01-19 2781
uniapp写小程序实现清除缓存（存储/获取/移除/清空）
Uniapp添加删除示例
m0_72189003的博客
12-01 676
【代码】Uniapp添加删除示例。
【uniapp】带清除保存功能的输入框
weixin_45319500的博客
01-07 1087
【代码】【uniapp】带清除保存功能的输入框。
uniapp实现点击按钮清空表单数据【前端开发】
跳探戈的小龙虾的博客
11-16 3861
点击按钮清空数据大家应该都不陌生，给表单的数据加一个绑定元素，:value，之后在点击的同时把绑定的元素值改为’'即可。但用:value在uniapp中无法清空元素，需要换成v-model绑定元素。 <input type="text" placeholder="请输入文明昵称..." name="userName" @input="userNameInput" confirm-type="done" confirm-hold="true" placeholder-style="color
uni-app 给input框添加点击清空按钮
小猫爪子
11-20 1万+
用value绑定输入的值，要通过@input事件监听，这个方法只要input值发生改变就会调用，v-if控制‘清空’这个图标，没值就不显示，我悟了！！！ 效果图 <view slot="default" class="search_box"> <text class="icon_search"></text> <input style="width: 280px;" :value="searchName" class="prompt" placeholder
antd切换清空input输入框内容
06-01
您可以在antd的Input组件上加上一个按钮，然后在按钮的onClick事件中清空Input的值。以下是示例代码： ``` import React, { useState } from 'react'; import { Input, Button } from 'antd'; const Example = () ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值