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的弹出框插件
Mar 18 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
基于javascript编写简单日历
May 02 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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
php函数的常用方法及注意之处小结
2011/07/10 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
js left,right,mid函数
2008/06/10 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
python剪切视频与合并视频的实现
2020/03/03 Python
python3 简单实现组合设计模式
2020/07/02 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
Django实现简单的分页功能
2021/02/22 Python
Windows和Linux动态库应用异同
2016/04/17 面试题
怎样写好自荐信和推荐信
2013/12/26 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
于丹论语心得观后感
2015/06/15 职场文书