vue中input限制只能输入数字

最新推荐文章于 2025-11-13 11:14:10 发布

原创最新推荐文章于 2025-11-13 11:14:10 发布 · 5.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了一段关于Vue组件中如何使用el-input实现输入框只允许输入数字和负号，并在特定条件下设置为空的JavaScript逻辑。方法包括字符串转换、正则表达式过滤和状态管理。

<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.query.filter = data
    },
    onlyNbr2() {
      const data = String(this.query.filter)
      // 如果只有一个负数，那么替换为 null
      console.log(data === '-')
      if (data === '-') {
        this.query.filter = null
      }
    }
  }
}