uniapp微信小程序解决type=“nickname“获取昵称,v-model绑定值为空问题!

news2024/11/26 2:22:23

解决获取 type="nickname"值为空问题

文章目录

    • 解决获取 type="nickname"值为空问题
      • 效果图
      • Demo
      • 解决方式
        • 通过表单收集内容
        • 通过 uni.createSelectorQuery

效果图

开发工具效果图,真机上还会显示键盘输入框

在这里插入图片描述


Demo

  • 如果通过 v-model 结合 @blur 获取不到值(个人测试,仅供参考)
<input type="nickname" v-model="nickName" @blur="blurNickName" placeholder="请输入昵称" maxlength="20" />

解决方式

通过表单收集内容
<form @submit="formSubmitInfoTap">
	<input type="nickname" name="nickName" placeholder="请输入昵称" maxlength="20" />
	
	<button class="submitBtn" type="primary" form-type="submit" size="large">确认</button>
</form>

formSubmitInfoTap(e) {
	let formdata = e.detail.value;
	console.log('获取昵称', formdata.nickName)
	// xxx
}

通过 uni.createSelectorQuery
  • 定义ID
<input id="nickName" type="nickname" placeholder="请输入昵称" maxlength="20" />

<button type="primary" @click="avatarInfoTap">确认</button>

uni.createSelectorQuery().in(this)
    .select("#nickName")
    .fields({
        properties: ["value"],
    })
    .exec((res) => {  
        const nickName = res?.[0]?.value  
        console.log('获取昵称', nickName)
        // xxx
    })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1693948.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用梦畅闹钟,结合自定义bat、vbs脚本等实现定时功能

梦畅闹钟-每隔一段时间运行一次程序 休息五分钟bat脚本&#xff08;播放音乐视频&#xff0c;并锁屏&#xff09; chcp 65001 echo 回车开始休息5分钟 pause explorer "https://www.bilibili.com/video/BV1RT411S7Tk/?p47" timeout /t 3 /nobreak rundll32.exe use…

Font shape `U/rsfs/m/n‘ in size <29.86> not available size <24.88>

解决方法&#xff1a;mathrsfs 删除这个包 其他可以参考&#xff1a;koma script - Size substitution with fontsize14 - TeX - LaTeX Stack Exchange

若依框架对于后端返回异常后怎么处理?

1、后端返回自定义异常serviceException 2、触发该异常后返回json数据 因为若依对请求和响应都封装了&#xff0c;所以根据返回值response获取不到Code值但若依提供了一个catch方法用来捕获返回异常的数据 3、处理的方法

python给图片加上图片水印

python给图片加上图片水印 作用效果代码 作用 给图片加上图片水印图片水印的透明度&#xff0c;位置可自定义 效果 原始图片&#xff1a; 水印图片&#xff1a; 添加水印后的图片&#xff1a; 代码 from PIL import Image, ImageDraw, ImageFontdef add_watermark(in…

shelll 正则表达式

sort sort命令对行内容进行排序 sort语法&#xff1a; 1.sort &#xff08;选项&#xff09; 参数 2.cat file | sort 选项 选项&#xff1a; -n 按照数字进行排序 -r 反向排序 -k 指定排序 -f 忽略大小写 会将小写字母转化成大写字母来比较 -b 忽略每行前面的空格 .........…

cake (C# Make) cross-platform build automation system

1、安装Cake.Tool dotnet new tool-manifest dotnet tool install -g Cake.Tool --version 4.0.0 dotnet-cake --help C:\Users\用户名\.config\dotnet-tools.json 2、新建项目CakeDemo(net8.0) 编写脚本&#xff1a; build.cake var target Argument("target",…

BWVS 靶场测试

一、PHP弱类型 is_numeric() 输入&#xff1a;127.0.0.1/BWVS/bug/php/code.php # 1、源代码分析 如果num不是数字&#xff0c;那么就输出num&#xff0c;同时如果num1&#xff0c;就输出flag。即num要是字符串又要是数字 # 2、函数分析&#xff1a; is_numeric()函数&…

怎么查看项目中antd的版本

使用antd时&#xff0c;有在线参考资料&#xff0c;但是需要根据项目需要&#xff0c;选择对应版本的参考资料。 antd在线参考资料&#xff1a; 组件总览 - Ant Design 如何查看当前项目中antd的版本呢&#xff1f; 在项目的终端中输入&#xff1a; npm list antd antd官网选择…

【Linux】详解线程控制之线程创建线程终止线程等待线程分离

一、线程创建 thread&#xff1a;这是一个指向pthread_t类型的指针&#xff0c;用于获取新创建线程的线程ID。在调用pthread_create后&#xff0c;这个指针会被设置为新线程的ID。 attr&#xff1a;这是一个指向pthread_attr_t类型的指针&#xff0c;用于设置线程的属性&#x…

零基础的粉丝有福了:逐键提示盲打更轻松

盲打就是不看键盘去打字&#xff0c;对于零基础的粉丝而言&#xff0c;盲打入门通常都是很难的&#xff0c;今天就给大家放个福利&#xff1a;从今天开始就能盲打&#xff0c;3天之后盲打就入门了。 真的有这么简单吗&#xff1f;是的&#xff0c;跟着我做就可以了。 首先&am…

Leetcode刷题笔记2:数组基础2

导语 leetcode刷题笔记记录&#xff0c;本篇博客记录数组基础1部分的题目&#xff0c;主要题目包括&#xff1a; 977.有序数组的平方 &#xff0c;209.长度最小的子数组 &#xff0c;59.螺旋矩阵II 知识点 滑动窗口 所谓滑动窗口&#xff0c;就是不断的调节子序列的起始位…

sysbench压测mysql性能测试命令和报告

sysbench压测mysql性能测试命令和报告 一、安装sysbench工具二、创建测试数据库三、基于sysbench构造测试表和测试数据四、数据库性能测试1、数据库读写性能测试2、数据库读性能测试3、数据库删除性能测试4、数据库更新索引字段性能测5、数据库更新非索引字段性能测试6、数据库…

[激光原理与应用-93]:激光焊接检测传感器中常用的聚焦镜、分色镜、分光镜、滤波镜

目录 一、聚焦镜 1.1 原理及作用 1.2 性能指标 1.3 应用 1.4 类型 二、分色镜 2.1 原理及应用 2.2 种类 2.3 特点 2.4 注意事项 2.5 性能指标 三、分光镜 ​编辑 3.1 分光镜的类型 3.2 分光镜的工作原理 3.3 分光镜的应用 3.4 分光镜的参数 3.5 分光镜的优点…

LabVIEW控制Trio控制器

将LabVIEW与Trio控制器结合&#xff0c;可以实现对复杂运动系统的控制和监测。以下是详细的方法和注意事项&#xff1a; 一、准备工作 软件安装&#xff1a; 安装LabVIEW开发环境&#xff0c;确保版本兼容性。 安装Trio控制器的相关驱动程序和软件&#xff0c;如Trio Motion …

Springboot集成GRPC

Springboot集成GRPC 一、springboot版本二、GRPC的pom依赖2.1 服务端2.2 客户端3.构建依赖 三、配置文件服务端客户端 四、 demo4.1 编写proto文件4.2 生成文件4.3 服务端重写方法4.4 客户端调用该方法 五、测试 一、springboot版本 <groupId>org.springframework.boot&l…

数理逻辑:1、预备知识

17.1 命题和联结词 ​ 命题&#xff1a;可以判定真假的陈述句。&#xff08;则悖论&#xff0c;祈使句&#xff0c;疑问句都不是命题&#xff09; ​ 原子命题&#xff1a;不能被分割为更小的命题的命题 例如&#xff1a; 2既是素数又是偶数 可以由$p: 2 是素数&#xff0c;…

AI模型抉择:开源VS闭源,谁主沉浮?

AI模型抉择&#xff1a;开源VS闭源&#xff0c;谁主沉浮&#xff1f; &#x1f604;生命不息&#xff0c;写作不止 &#x1f525; 继续踏上学习之路&#xff0c;学之分享笔记 &#x1f44a; 总有一天我也能像各位大佬一样 &#x1f3c6; 博客首页 怒放吧德德 To记录领地 &am…

C++字符编码 cppp-reiconv库使用详解

经常写一些控制台小程序&#xff0c;常常会遇到输出中文乱码的问题&#xff0c;在windwos下可以使用MultiByteToWideChar转换字符编码&#xff0c;但跨平台就需要cppp-reiconv这样的第三方字符编码处理库&#xff0c;且开源。 一、下载cppp-reiconv库的源码和静/动态库 GitHu…

Windows11搭建Flutter3开发环境

下载&#xff1a;https://docs.flutter.cn/get-started/install/windows/desktop?tabdownload 下载以后解压到C盘&#xff1a; 将bin目录添加到环境变量PATH&#xff1a; 打开终端&#xff0c;输入&#xff1a; flutter doctor执行下面的命令&#xff0c;同意安卓协议&am…

【linux】docker下nextcloud安装人脸识别插件

一、插件源码地址&#xff1a; GitCode - 开发者的代码家园 二、插件官网地址&#xff1a; Releases - Face Recognition - Apps - App Store - Nextcloud 三、插件安装教程&#xff1a; 1、查看本地nextcloud版本号 http://ipAddress:8080/settings/admin/overview 2、找…