vue 限制input只能输入正数的操作

下面是详细讲解“vue 限制 input 只能输入正数的操作”的完整攻略：

步骤一：使用 v-model 双向绑定

我们需要使用 v-model 双向绑定来获取 input 中的值，并将其传递给 Vue 实例中的数据。 下面是一个简单的示例代码：

<template>
  <div>
    <input type="number" v-model="number">
    <p>{{ number }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: '',
    }
  },
}
</script>

在上述代码中，我们使用一个 input 元素来获取用户输入的数字。将 v-model 属性绑定到 number 数据上，这样就可以实现双向绑定。

步骤二：添加校验函数

接下来，我们需要添加一个校验函数来限制用户只能输入正数。我们可以在 watch 中监听数据变化，并在函数中进行校验。 下面是代码示例：

<template>
  <div>
    <input type="number" v-model="number">
    <p>{{ number }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: '',
    }
  },
  watch: {
    number(val) {
      // 如果输入的不是数字将其修改为 ''
      if (isNaN(val)) {
        this.number = ''
      }

      // 如果输入的是负数，将其修改为 ''
      if (val < 0) {
        this.number = ''
      }
    },
  },
}
</script>

在上述代码中，我们添加了一个 watch 监听 number 数据变化，并在函数中进行校验。 如果输入的不是数字或是负数，我们就将其修改为空字符串。 这样，我们就可以实现限制 input 只能输入正数的功能。

示例一：限制输入小数

下面是第一个例子，在这个例子中，我们将限制输入小数。 在 watch 函数中添加以下代码：

if (val.indexOf('.') > -1) {
  const temp = Number(val).toFixed(2)
  this.number = temp
}

在这里，我们检查输入的数字是否包含小数点。 如果包含小数点，我们使用 Number(val).toFixed(2) 将其设置为只有两位小数的数字。 例如，如果用户输入了 10.123，它会变成 10.12。

完整代码如下：

<template>
  <div>
    <input type="number" v-model="number">
    <p>{{ number }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: '',
    }
  },
  watch: {
    number(val) {
      if (isNaN(val)) {
        this.number = ''
      }

      if (val < 0) {
        this.number = ''
      }

      if (val.indexOf('.') > -1) {
        const temp = Number(val).toFixed(2)
        this.number = temp
      }
    },
  },
}
</script>

示例二：限制输入整数

下面是第二个例子，在这个例子中，我们将限制输入整数。 在 watch 函数中添加以下代码：

if (val.indexOf('.') > -1) {
  const temp = Math.trunc(Number(val))
  this.number = temp
}

在这里，我们检查输入的数字是否包含小数点。 如果包含小数点，我们使用 Math.trunc(Number(val)) 将其截取成整数。 例如，如果用户输入了 10.98，它会变成 10。

完整代码如下：

<template>
  <div>
    <input type="number" v-model="number">
    <p>{{ number }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: '',
    }
  },
  watch: {
    number(val) {
      if (isNaN(val)) {
        this.number = ''
      }

      if (val < 0) {
        this.number = ''
      }

      if (val.indexOf('.') > -1) {
        const temp = Math.trunc(Number(val))
        this.number = temp
      }
    },
  },
}
</script>

通过上述两个示例，我们可以实现限制 input 只能输入正数的功能，同时也可以进一步扩展该功能，例如限制输入整数，限制输入小数等。