使用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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 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
十天学会php之第九天
2006/10/09 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP7.0版本备注
2015/07/23 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
javascript 面向对象继承
2009/11/26 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
python中dict使用方法详解
2019/07/17 Python
简单了解python中的与或非运算
2019/09/18 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
如何在python中判断变量的类型
2020/07/29 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
VC++笔试题
2014/10/13 面试题
教师求职信范文分享
2013/12/27 职场文书
难忘的一天教学反思
2014/04/30 职场文书
公司年会开场白
2015/06/01 职场文书
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js