解决vue中监听input只能输入数字及英文或者其他情况的问题

 更新时间:2018年08月30日 11:31:30   作者:向梦想出发11  
今天小编就为大家分享一篇解决vue中监听input只能输入数字及英文或者其他情况的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

1、

<input placeholder="请输入条形码" class="disPriceStyle" v-model = 'searcBarCode'></input>、 (只能输入数字,英文)

<input placeholder="请输入商品条形码" class="disPriceStyle" maxlength="20" v-model = 'searchGoodsName'></input> (只能输入数字,英文及中文)

<input placeholder="请输入活动名称" class="disPriceStyle" maxlength="20" v-model="searchProName"></input> (只能输入数字,英文及中文)

2、

watch:{
   searcBarCode:function(){
    this.searcBarCode=this.searcBarCode.replace(/[\W]/g,'');
   },
   searchGoodsName:function(){
    this.searchGoodsName = this.searchGoodsName.replace(/[^A-Za-z0-9\u4e00-\u9fa5]/g,'');
   },
   searchProName:function(){
    this.searchProName = this.searchProName.replace(/[^A-Za-z0-9\u4e00-\u9fa5]/g,'');
   }
  },

以上这篇解决vue中监听input只能输入数字及英文或者其他情况的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中的methods、watch、computed的区别

    Vue中的methods、watch、computed的区别

    这篇文章主要介绍了Vue中的methods、watch、computed的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 在vue中嵌入外部网站的实现

    在vue中嵌入外部网站的实现

    这篇文章主要介绍了在vue中嵌入外部网站的实现方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • el-table 选中行与复选框相互联动的实现步骤

    el-table 选中行与复选框相互联动的实现步骤

    这篇文章主要介绍了el-table 选中行与复选框相互联动,分为两步,第一步点击行时触发复选框的选择或取消,第二步点击复选框时触发相应行的变化,本文通过实例代码给大家详细讲解,需要的朋友可以参考下
    2022-10-10
  • Vue隐藏显示、只读实例代码

    Vue隐藏显示、只读实例代码

    本文通过实例代码给大家介绍了Vue隐藏显示、只读功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • vue3+TS 实现自定义指令长按触发绑定的函数

    vue3+TS 实现自定义指令长按触发绑定的函数

    这篇文章主要介绍了vue3+TS实现自定义指令长按触发绑定的函数,文中给大家分享了编写自定义指令时遇到的几个难点,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue+axios实现文件上传的实时进度条

    vue+axios实现文件上传的实时进度条

    最近用vue写上传的时候,遇到一个需求就是页面上展示上传的进度条,之后写过一次,但是用的是假交互,直接从0-100,今天分享一下用axios自带的onUploadProgress来完成这个小需求,感兴趣的朋友可以参考下
    2024-01-01
  • 使用watch监听路由变化和watch监听对象的实例

    使用watch监听路由变化和watch监听对象的实例

    下面小编就为大家分享一篇使用watch监听路由变化和watch监听对象的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue下如何利用canvas实现在线图片标注

    vue下如何利用canvas实现在线图片标注

    这篇文章主要介绍了vue下如何利用canvas实现在线图片标注,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue单页面如何解决多个视频同时仅能播放一个问题

    vue单页面如何解决多个视频同时仅能播放一个问题

    这篇文章主要介绍了vue单页面如何解决多个视频同时仅能播放一个问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vuex实现数据增加和删除功能

    Vuex实现数据增加和删除功能

    今天小编就为大家分享一篇Vuex实现数据增加和删除功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论