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 相关文章推荐
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
jQuery学习笔记 更改jQuery对象
2012/09/19 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
Javascript函数的参数
2015/07/16 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
Python正则表达式匹配中文用法示例
2017/01/17 Python
python中的for循环
2018/09/28 Python
python url 参数修改方法
2018/12/26 Python
python获取服务器响应cookie的实例
2018/12/28 Python
Python删除n行后的其他行方法
2019/01/28 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
佳能法国商店:Canon法国
2019/02/14 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
销售主管的自我评价分享
2014/01/03 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
安全守法证明
2015/06/23 职场文书
2015年中秋节主持词
2015/07/30 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
Android 中的类文件和类加载器详情
2022/06/05 Java/Android