vue 中 input 限制只能输入数字,允许正数与负数

vue 中 input 限制只能输入数字,允许正数与负数

知了小站
2022-02-20 / 1 评论 / 2,691 阅读

vue 的 input 中, 限制只能输入正数与负数,完整代码如下:

<template>
<el-input v-model="number" @input="onlyNbr1" @change="onlyNbr2"/>
</template>

<script>
  data() {
    return {
      number: null
    }
  },
  methods: {
    onlyNbr1(ipt) {
      let data = String(ipt)
      const char = data.charAt(0)
      // 先把非数字的都替换掉
      data = data.replace(/[^\d]/g, '')
      // 如果第一位是负号,则允许添加
      if (char === '-') {
        data = '-' + data
      }
      this.number = data
    },
    onlyNbr2() {
      const data = String(this.number)
      // 如果只有一个负数,那么替换为 null
      console.log(data === '-')
      if (data === '-') {
        this.number = null
      }
    }
  }
}

如果有更好的实现方式,欢迎评论讨论。

本文共 71 个字数,平均阅读时长 ≈ 1分钟
5

打赏

评论 (1)

取消
  1. 头像
    aaa
    Windows 10 · FireFox

    麻烦

    回复