使用vue与jquery实时监听用户输入状态的操作代码
作者:Joocherry_ 时间:2023-07-02 17:08:02
实现效果: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
标签:vue,jquery,监听
0
投稿
猜你喜欢
Pytorch实现图像识别之数字识别(附详细注释)
2022-04-08 08:12:54
简单介绍Ruby中的CGI编程
2022-09-07 21:38:14
pytorch-gpu安装的经验与教训
2022-01-11 20:23:36
python书籍信息爬虫实例
2023-11-17 11:15:49
Python APScheduler执行使用方法详解
2023-03-01 03:21:13
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2021-09-08 13:23:14
python基础之元组
2021-06-28 08:06:24
推荐系统MostPopular算法的Python实现方式
2022-04-21 14:44:24
Python标准库inspect的具体使用方法
2023-05-30 08:00:37
用Python进行一些简单的自然语言处理的教程
2021-07-03 19:51:26
详解运行Python的神器Jupyter Notebook
2022-01-20 13:21:56
浅谈慢SQL优化之索引的作用
2024-01-24 20:31:54
Python在cmd上打印彩色文字实现过程详解
2022-12-19 07:27:33
Django+Uwsgi+Nginx如何实现生产环境部署
2023-02-08 00:48:48
Python内置数据结构与操作符的练习题集锦
2022-07-25 05:12:53
基于php权限分配的实现代码
2023-11-14 11:10:49
python小程序之飘落的银杏
2023-05-25 02:58:31
python创建和使用字典实例详解
2021-06-11 11:37:06
python实现redis三种cas事务操作
2022-08-27 01:50:59
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2021-04-26 18:19:14