如何在 Vue.js 中应用具有类型编号的输入？答案

【问题标题】：How to apply input which has type number in Vue.js?如何在 Vue.js 中应用具有类型编号的输入？
【发布时间】：2022-02-02 21:33:11
【问题描述】：

我使用 Nuxt.js 制作了 Web 应用程序。我正在尝试申请验证，该验证排除了同一 vue 组件中所有输入标签（20~30）的负值和小数点。我认为将验证规则注入到 vue 生命周期挂载事件上的输入标签的方式会成功，但不会改变输入标签。

<template>
・・・・・・・
<input
    type="number"
    style="width: 100%; box-sizing: border-box; text-align: right"
     v-model="item"
        />
・・・・・・・
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component({})
export default class extends Vue {
   onNumbers = (val: any) => {
    return val.replace(/\D/g, '')
  }

  mounted() {
    document.querySelectorAll('input').forEach((item) => {
      item.addEventListener('input', (val) => {
        this.onNumbers(val)
      })
    })
  }
}
</script>

有人给我建议吗？

【问题讨论】：

如果您将输入标签的min 属性设置为0 第一个条件满足但我不明白第二个条件是decimal points to all input tag(20~30)。请举个例子

标签： javascript html vue.js nuxt.js

【解决方案1】：

在您的input-tag 中将以下属性设置为min="0" 和step="1"，它应该可以工作。

<input
    type="number"
    min="0"
    step="1"
    style="width: 100%; box-sizing: border-box; text-align: right"
    v-model="item"
/>

【讨论】：