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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
类似CSDN图片切换效果脚本
Sep 17 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
JS实现随机抽取三人
Nov 06 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
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中的生成XML文件的4种方法分享
2012/10/06 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
提高PHP编程效率的方法
2013/11/07 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
Python不规范的日期字符串处理类
2014/06/10 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
浅谈python出错时traceback的解读
2020/07/15 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
工程力学专业毕业生求职信
2013/10/06 职场文书
电子商务专业推荐信范文
2013/12/02 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
倡议书格式模板
2014/05/13 职场文书
建设投标担保书
2014/05/13 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
Python Flask实现进度条
2022/05/11 Python