我们在开发中难免会遇到一些登录注册输入框中的值为空时,按钮的状态变成为不可点击的状态,当输入框有值后就把按钮变为可点击的状态

代码部分:

<input placeholder="请输入手机号" name="input" type="number" v-model="phone" @input="changeDisabled"></input>@input: 输入框输入的实时监听
<button class="bg-blue text-center login_btn" :disabled="disabled">登录</button> 
data() {
return {
disabled: true
}
} changeDisabled(e) {
// console.log(e)
if (e.detail.value != "") {
this.disabled = false;
} else {
this.disabled = true;
}
},

效果图:

有值后:

uniapp 输入有值后按钮变色的更多相关文章

  1. asp.net 的那点事(1、当用户在浏览器地址栏输入了网址后,发生了什么?)

    从今天开始我将抽出空闲时间复习asp.net相关知识.此篇博文只是为了记录学习当中的知识点和感觉到比较重要的知识点. 本人才疏学浅,如有遗漏或者错误希望广大博友尽情拍砖.我会在后续中进行更正. 这个问 ...

  2. 网易笔试题:浏览器中输入一个url后回车到返回页面信息的过程

    You enter a URL into the browser输入一个url地址 The browser looks up the IP address for the domain name浏览器 ...

  3. elementUi中input输入字符光标在输入一个字符后,光标失去焦点

    elementUi中input输入字符光标在输入一个字符后,光标就退出,无法输入需要再次聚焦然后输入一个字符又再次退出 首先,用elementUi正常用v-model绑定输入的值是不会造成光标退出的, ...

  4. easyui中combobox 验证输入的值必须为选项框中的数据

    当作为提示框的方式时,combobox必须设置为允许用户输入的模式,但是当用户输入后未选择正确的数据就直接按tab或点击鼠标离开控件会导致用户输入无效的值并且通过验证,为了避免这种情况的发生我们需要对 ...

  5. Java Scanner 类,获取用户输入的值

    Scanner 类使用步骤 1.导入java.util.Scanner import java.util.Scanner; 2.创建Scanner对象 Scanner scan = new Scann ...

  6. Javascript对checkbox勾选判断,错误提示和按钮变色操作

    同意相关条款未打钩时,登录按钮为灰色且无法提交,点击灰色的登录按钮提示同意相关条款,打钩后变成亮色且可以提交信息. 勾选框及文字: <div class="check-rule&quo ...

  7. js中表单提交后按钮变灰色的功能

    表单提交后按钮变成灰色 http://www.111cn.net/wy/js-ajax/45299.htm

  8. c# winform动态生成控件与获取动态控件输入的值

    差不多有2年没有写winform程序,一直都是写bs.最近项目需要,又开始着手写一个小功能的winform程序,需要动态获取xml文件的节点个数,生成跟节点个数一样的textbox, 最后还要获取操作 ...

  9. iOS 身份证最后一位是X,输入17位后自动补全X(转)

    非原创,转载自http://blog.csdn.net/l2i2j2/article/details/51542028如果身份证最后一位是X,输入17位后自动补全X// textField代理方法 - ...

  10. YII2 用 in查询的时候出现无结果, 删除某些值后查询有结果 提前sort数组即可

    YII2 用 in查询的时候出现无结果, 删除某些值后查询有结果, 在数组前用了一个 array_merge 合并了2个数组. 排查发现是 数组中键值没有挨着从0开始 另外没有从小到大, 没观察室哪个 ...

随机推荐

  1. mmdetection使用wandb查看训练日志

    mmdetection查看日志之前一直是在用TextLoggerHook,已经觉得挺方便的了,自从用了wandb之后,发现wandb真不错,看log更方便了,回不去了. wandb的简单配置: wan ...

  2. Gowin 1nr-9k mipi测试

    本次实验是利用gowin 1nr-9k的开发板测试MIPI屏. 测试的屏是2.0寸的,接口如下: 接上IO就是RST和MIPI的时钟和数据接口,另外就是电源和地. Gowin的案例中,首先是软件要升级 ...

  3. 力扣367(java&python)-有效的完全平方数(简单)

    题目: 给定一个 正整数 num ,编写一个函数,如果 num 是一个完全平方数,则返回 true ,否则返回 false . 进阶:不要 使用任何内置的库函数,如  sqrt . 示例 1: 输入: ...

  4. IOT设备连接上云

    如何让我的设备连接上云?参考如下路径. 云 [![](http://static-aliyun-doc.oss-cn-hangzhou.aliyuncs.com/assets/img/974556/1 ...

  5. 技术干货 | 阿里云数据库PostgreSQL 13大版本揭秘

    简介: 阿里云RDS PostgreSQL是一款兼容开源PostgreSQL的全托管云数据库产品,自2015年首次发布以来,根据用户需求不断升级迭代,已支持9.4.10.11.12等多个版本,覆盖了高 ...

  6. 浅谈专有云MQ存储空间的清理机制

    简介: 浅谈专有云MQ存储空间的清理机制 在近⼀年的项⽬保障过程中,对专有云MQ产品的存储⽔位清理模式⼀直存疑,总想一探究竟但又苦于工作繁忙.精力有限,直到最近⼀次项⽬保障过程中再次出现了类似的问题, ...

  7. 唯品会:在 Flink 容器化与平台化上的建设实践

    简介: 唯品会 Flink 的容器化实践应用,Flink SQL 平台化建设,以及在实时数仓和实验平台上的应用案例. 转自dbaplus社群公众号作者:王康,唯品会数据平台高级开发工程师 自 2017 ...

  8. 业内首款云原生技术中台产品云原生 Stack 来了!

    简介: 云原生 Stack 满足了各种典型场景下客户对于线下高集成平台的诉求,让企业数字话转型不受技术约束,专注业务本身,加速企业数字化迭代. 今天,企业数字化转型依然面临很大的挑战,虽然有很多新技术 ...

  9. 技术干货 | 闲鱼:一个优秀的 Push 平台,需要经历怎样的前世今生

    ​简介: mPaaS 消息推送服务,快速集成多家厂商 Push 通道,有效提高用户留存率,提升用户体验. 编者荐语: 点击这里,了解 mPaaS 消息推送服务,快速集成多家厂商 Push 通道,有效提 ...

  10. [FAQ] Win10 WSL Ubuntu 根目录实际位置

    1. 运行(win+R),直接输入 \\wsl$ 进入Ubuntu的目录. 2. 或者文件夹里同样输入  \\wsl$ 进行查找. Refer:Win10 WSL 路径 Link:https://ww ...