vue监听input标签的value值方法


Posted in Javascript onAugust 27, 2018

由于项目需要做实时搜查询数据,所以需要监听input标签的value,这里使用的前端框架vue

<input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/>

这里的重点是:@input="search($event)",表示当文本框有内容输入时,则调用search方法

/*模糊搜索*/
search: function (event) {
  //方法一:直接通过event.data可以获得文本内容
  if(event.data!=null){
    this.materialName = event.data;    
  }
  //方法二:获取DOM对象取value值
  this.materialName = event.currentTarget.value;
  //方法三:通过js获取
  this.materialName = document.getElementById("materialSearch").value;
}

拓展知识:Vue 监听多个input框是否都存在值的方法

如下所示:

<div class="inner clear">
 <input type="text" placeholder="第一个输入框" v-model="input1">
</div>

<div class="inner clear">
 <input type="text" placeholder="第二个输入框" v-model="input2">
</div>

<div class="inner clear">
 <input type="text" placeholder="第三个输入框" v-model="input3">
</div>

vue监听input标签的value值方法

script部分:

export default {
  data:function(){
  return {
   input1:'',
   input2:'',
   input3:'',
   ifExist:'',
  }
 },
}

在页面中插入一个隐藏域:

<div style="display:none" >{{ exitsVal }}</div>

利用Vue的computed属性

computed:{
  exitsVal:function(){
    this.ifExist=Number(Boolean(this.userName))+Number(Boolean(this.mailCode))+Number(Boolean(this.mailAd));
  }
 },

用watch监听data中 ifExist的值

watch:{
ifExist(newVal,oldVal){
   if(Number(newVal) === 3){
    三个input框内都有值时需要做的操作
   }else{
    至少一个没有值
   }
  }
}

以上这篇vue监听input标签的value值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
js实现随机点名程序
Sep 17 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 #Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 #Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 #Javascript
vue实例中data使用return包裹的方法
Aug 27 #Javascript
vue项目打包部署到服务器的方法示例
Aug 27 #Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 #Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 #Javascript
You might like
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP实现简易计算器功能
2020/08/28 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
vue实现的组件兄弟间通信功能示例
2018/12/04 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
python实现批量改文件名称的方法
2015/05/25 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python简单实现enum功能的方法
2016/04/25 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
python3文件复制、延迟文件复制任务的实现方法
2019/09/02 Python
Django分组聚合查询实例分享
2020/04/29 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
使用Python实现批量ping操作方法
2020/05/06 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
介绍Ibatis的核心类
2013/11/18 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
数控加工专业毕业生自荐信
2013/09/27 职场文书
学校万圣节活动方案
2014/02/13 职场文书
珍惜水资源建议书
2014/03/12 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
2014年法院工作总结
2014/11/24 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
Python的三个重要函数详解
2022/01/18 Python
英镑符号 £
2022/02/17 杂记