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

代码部分:

<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. Android studio 提示“android qemu-system-i386.exe停止工作”

    解决方案 android studio 关闭AVD时提示"android qemu-system-i386.exe停止工作" 配置虚拟机时"Graphics"选 ...

  2. ASP.NET MVC 性能优化和调试

    学习 .NET Core 应用程序的调试技术可以分为以下步骤: 理解基础概念:首先,你需要理解什么是调试以及为什么我们需要调试.理解断点.单步执行.变量监视等基本调试概念. 学习 Visual Stu ...

  3. c#程序员必学清单

    必读书目:1. "Effective C#: 50 Specific Ways to Improve Your C#" by Bill Wagner2. "CLR via ...

  4. 还原数据库从远端环境到本地开发环境,数据SINGLE_USER问题

    要还原到本地开发环境,首先要detach本地数据库或者是删除本地数据库,不然提示在使用中还原不了,但是搞过几次去做detach和drop数据库时,总是不成功,最后还出现个单用户模式,莫名奇妙 为此网上 ...

  5. 一道SQL面试题

    表结构如下 是一张递归格式的表 使用SQL转换成如下格式 SQL实现 使用SQL转换成上图的格式 SQL代码: WITH T_Recur AS ( SELECT Id,1 num, cast(name ...

  6. Java工具篇之Disruptor高性能队列

    简介: disruptor适用于多个线程之间的消息队列,`作用与ArrayBlockingQueue有相似之处`,但是disruptor从功能.性能都远好于ArrayBlockingQueue,当多个 ...

  7. 基于 Flink CDC 实现海量数据的实时同步和转换

    简介: 徐榜江在 5.21 Flink CDC Meetup 的分享. 摘要:本文整理自 Apache Flink Committer,Flink CDC Maintainer,阿里巴巴高级开发工程师 ...

  8. 百信银行基于 Apache Hudi 实时数据湖演进方案

    简介: 本文介绍了百信银行实时计算平台的建设情况,实时数据湖构建在 Hudi 上的方案和实践方法,以及实时计算平台集成 Hudi 和使用 Hudi 的方式. 本文介绍了百信银行实时计算平台的建设情况, ...

  9. OpenKruise v0.10.0 新特性 WorkloadSpread 解读

    ​简介: 针对需求,OpenKruise 在 v0.10.0 版本中新增了 WorkloadSpread 特性.目前它支持配合 Deployment.ReplicaSet.CloneSet 这些 wo ...

  10. [HTML] 访问 a 链接不带 referer 的方式

    html5 新属性 referrerpolicy: referrerpolicy no-referrer no-referrer-when-downgrade origin origin-when-c ...