Question

我正在尝试确定输入到HTML输入（type =“ number”）中的值是否为零或大于零，但不是负数。我正在使用Vue进行此操作，并具有以下沙箱示例：

https://codesandbox.io/s/2zxkm6j0vp?fontsize=14

违规代码位于“ App.vue”文件中。

我有一个名为data的{{1}}属性，该属性最初设置为inputNumber。在输入字段中，用户可以为输入输入一个值（依次绑定（使用null和v-model和trim修饰符）。

然后我有一个number属性，该属性返回检查结果（computed。当return Number(this.inputNumber) >= 0的值小于inputNumber（当前显示错误）或大于0（显示肯定结果）。如果输入0，则应返回肯定消息，因为这应该是用户可以输入的“金额”。输入0时不显示任何消息。

非常感谢您的帮助。

Answer 1

替换

<p v-if="inputNumber && isValid">{{ inputNumber }} is valid</p>

作者

<p v-if="isValid">{{ inputNumber }} is valid</p>

if inputNumber检查将在false时返回0。

编辑

考虑到isValid值以及一个空值（当清除文本字段时），如下扩展null检查。

computed: {
    isValid() {      
        return (this.inputNumber !== null)  && (this.inputNumber !== '') && (+this.inputNumber >= 0);      
}

<p v-if="isValid">{{ inputNumber }} is valid</p>
<p v-else-if="!isValid">{{ inputNumber }} is not valid</p>

Answer 2

inputNumber如果在此处等于0，则将为false：

<p v-if="inputNumber && isValid">{{ inputNumber }} is valid</p>

这就是为什么它不显示。

为解决此问题，我们可以将其替换为

<p v-if="inputNumber !== '' && isValid">{{ inputNumber }} is valid</p>

并使用''

初始化inputNumber

data() {
  return {
    inputNumber: ''
  }
},

如果我们将其保留为null，则在您输入一个值并将输入字段为空之后，inputNumber将不再为null，并且“ is valid”将继续显示。

用于检查数字值是否为零（且不为null）或大于零但不为负的Javascript

2 个答案: