使用vue与jquery实时监听用户输入状态的操作代码
作者:Joocherry_ 发布时间:2023-07-02 17:08:02
标签:vue,jquery,监听
实现效果:input未输入值,按钮禁用
jquery操作代码:
html
<input type="text" name="" placeholder="请输入用户名" id="userName" >
<button class="disabled" id="login">登录</button>
css
.disabled {
pointer-events: none;//禁用点击事件
cursor: default;//鼠标禁用
opacity: 0.4;
}
js
//监听input里的值
$('#userName').on('input propertychange',function(){
if(this.value.length != 0){
$('#login').removeClass('disabled');
}else{
$('#login').addClass('disabled');
}
});
Vue操作代码:
html
<template>
<div>
<input type="text" placeholder="请输入用户名" v-model="userName">
<button :disabled="forbidden" >登录</button>
</div>
</template>
js
export default{
data(){
return{
forbidden:false,
userName:null
}
},
methods:{
if(this.userName == null){
this.forbidden = true;
}else{
this.forbidden = false
}
}
}
总结
以上所述是小编给大家介绍的使用vue与jquery实时监听用户输入状态的操作代码网站的支持!
来源:http://www.jianshu.com/p/293ebeba7e87
0
投稿
猜你喜欢
- python中zip函数返回一个以元组为元素的列表,其中第 i 个元组包含每个参数序列的第 i 个元素。返回的列表长度被截断为最短的参数序列
- 方法一import randomimport numpy as npfrom PIL import Image, ImageOps, Ima
- Python使用称为Python Path的搜索路径来查找使用import语句导入代码的模块。大多数代码只会汇入已经默认路径上的模块,通过安
- 一、什么是索引 减少磁盘I/O和逻辑读次数的最佳方法之一就是使用【索引】 索引允许SQL Server在表中查找数据而不需要扫描整个表。 1
- 建议有js基础,了解jquery,thinkphp,废话不说多下面就上代码《————HTML————》//thinkphp循环显示把data
- 问题你想读写JSON(JavaScript Object Notation)编码格式的数据。解决方案json 模块提供了一种很简单的方式来编
- os.remove不能用来删除文件夹,否则拒绝访问。# -*- coding:utf-8 -*-import osif __name__ =
- 上面两个简单的Sql,我们从表面理解,查询的最终结果应该是一样的,但实际结果却和我们想象的不一样第一条sql查询的结果有一条数据第二条sql
- 目前 Linux 下有一些使用 Python 语言编写的 Linux 系统监控工具 比如 inotify-sync(文件系统安全监控软件)、
- Java与mongodb的连接1. 连单台mongodbMongo mg = new Mongo();//默认连本机127.0.0.1 端口
- 根据Nicholas的说法,有四种代码会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的D
- 1. 下载RPM安装包, 因为安装MySQL的时候,软件会需要一依赖关系, 所以建议把所有的安装包下载下载, 再依次安装所以的RPM包。 2
- 用pyinstaller打包的exe文件打开时,命令窗口一闪而过,并且未出现GUI界面,也看不到错误信息,然后去网上搜相关的信息,最多的两种
- Python有许多强大的库用于爬虫,如beautifulsoup、requests等,本文将以网站https://www.xiurenji.
- 前言网易云音乐这款音乐APP本人比较喜欢,用户量也比较大,而网易云音乐之所以用户众多和它的歌曲评论功能密不可分,很多歌曲的评论非常有意思,其
- 本文实例讲述了JS实现点击li标签弹出对应的索引功能。分享给大家供大家参考,具体如下:需求:点击li标签,弹出对应的索引先看效果:html结
- 本文实例讲述python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件的方法,该程序采用python 2.7编写。主
- 存储过程就是作为可执行对象存放在数据库中的一个或多个SQL命令。定义总是很抽象。存储过程其实就是能完成一定操作的一组SQL语句,只不过这组语
- 如下所示:<div id="app"><el-form :model="ruleForm2&
- 场景:主库DB:utf8字符集备库DB:gbk字符集需求:校验主备数据是否一致,并且修复校验过程:设置主库连接为utf8,设置备库连接为gb