使用vue与jquery实时监听用户输入状态的操作代码


Posted in jQuery onSeptember 19, 2017

实现效果: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实时监听用户输入状态的操作代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 #jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 #jQuery
jQuery选择器之子元素选择器详解
Sep 18 #jQuery
jQuery实现的表格前端排序功能示例
Sep 18 #jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 #jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 #jQuery
You might like
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
Vue实现PopupWindow组件详解
2018/04/28 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
python模拟enum枚举类型的方法小结
2015/04/30 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
python实现微信自动回复功能
2018/04/11 Python
python读取和保存图片5种方法对比
2018/09/12 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
绿色家庭事迹材料
2014/05/01 职场文书
产品包装策划方案
2014/05/18 职场文书
出纳岗位职责范本
2015/03/31 职场文书
入党介绍人意见2015
2015/06/01 职场文书
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL