美文网首页vue
vue 文本框保留两位小数、保留整数的方法

vue 文本框保留两位小数、保留整数的方法

作者: 一只正在成长的程序猿 | 来源:发表于2019-08-20 16:52 被阅读1次

一、保留两位小数(@keydown)

方法

oninput(e) {
            // 通过正则过滤小数点后两位
            e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
            console.log('e', e.target.value)
},

用法

 <input type="number" v-model="greenback" @keydown="oninput" autocomplete="off">

二、保留整数(@keyup)

方法

  jugeNumber() {
      if (/[^\d]/g.test(this.moneyValue)) {
        this.$vux.toast.text(this.$t("m.recharge.onlyInteger"));
        this.moneyValue = "";
      }
    },

用法

<input type="number" v-model="moneyValue" @keyup="jugeNumber" autocomplete="off" />

三、限制文本框输入(watch)

方法

  data() {
    return {
      bankaddress: "",
      swift: "",
    };
  }, 

watch:{
   swift:function(){
    this.swift=this.swift.replace(/[\W]/g,'');//只能输入英文和数字
   },
   bankaddress:function(){
    this.bankaddress = this.bankaddress.replace(/[^a-zA-Z]/g,'');//只能输入英文
   },
  },

用法(不用写任何方法,已经有watch监听)

<input type="text"  v-model="swift" />

相关文章

网友评论

    本文标题:vue 文本框保留两位小数、保留整数的方法

    本文链接:https://www.haomeiwen.com/subject/emnpsctx.html