vue监听input标签的value值方法

 更新时间:2018年08月27日 10:27:35   作者:FANKYIXUN  
今天小编就为大家分享一篇vue监听input标签的value值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

由于项目需要做实时搜查询数据,所以需要监听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>

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值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue祖孙组件之间的数据传递案例

    vue祖孙组件之间的数据传递案例

    这篇文章主要介绍了vue祖孙组件之间的数据传递案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • vue基于Element按钮权限实现方案

    vue基于Element按钮权限实现方案

    这篇文章主要介绍了vue基于Element按钮权限实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • vue中常用的rules验证方式总结

    vue中常用的rules验证方式总结

    这篇文章主要为大家详细介绍了vue中常用的几种表单rules验证方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-10-10
  • Vue项目三级联动路由跳转与传参的思路详解

    Vue项目三级联动路由跳转与传参的思路详解

    这篇文章主要介绍了Vue项目三级联动的路由跳转与传参的思路详解,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • 一篇文章搞懂Vue3中如何使用ref获取元素节点

    一篇文章搞懂Vue3中如何使用ref获取元素节点

    过去在Vue2中,我们采用ref来获取标签的信息,用以替代传统 js 中的 DOM 行为,下面这篇文章主要给大家介绍了关于如何通过一篇文章搞懂Vue3中如何使用ref获取元素节点的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue如何实时往数组里追加数据

    vue如何实时往数组里追加数据

    这篇文章主要介绍了vue如何实时往数组里追加数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue和uniapp中该如何使用canvas详解

    Vue和uniapp中该如何使用canvas详解

    说起canvas是css3新增的标签,而饼状图又是canvas经典,我们公司现在正在用uni-app框架去研发APP,下面这篇文章主要给大家介绍了关于Vue和uniapp中该如何使用canvas的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue+js实现微信上传图片选择功能

    vue+js实现微信上传图片选择功能

    这篇文章主要为大家详细介绍了vue+js实现微信上传图片选择功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue2.0项目实现路由跳转的方法详解

    vue2.0项目实现路由跳转的方法详解

    这篇文章主要介绍了vue2.0项目实现路由跳转的详细方法,非常不错,具有一定的参考借鉴借鉴价值,需要的朋友可以参考下
    2018-06-06
  • vue.js 表格分页ajax 异步加载数据

    vue.js 表格分页ajax 异步加载数据

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下
    2016-10-10

最新评论