Vue 3：html 属性上的条件 v-if

Question

我正在尝试有条件地呈现 HTML 元素属性：

EG:

<InputNumber v-model:value="example[index].number" 
     :min="collector.attr[0] ? collector.attr[0] : 0" 
     :max="collector.attr[1] ? collector.attr[1] : 0" 
     :step="0.01"
     style="min-width: 120px;"/>

问题：设置了最小值 0 (collector.attr[0] = null)，但我想要例如。该用户能够输入“-100”

目标：如果 collector.attr[1] 为“null”，我想删除“:min”属性 - resp。如果设置了最小值，则只允许此属性。

像这样：

<InputNumber
     v-if="collector.attr[0]" => then :min="collector.attr[0]" 
 />

非常感谢您的帮助:)

Answer 1

或许您可以设置一个最小值，超过该值用户将不会输入任何内容。像这样

<InputNumber :min="collector.attr[0] ? collector.attr[0] : -Number.MAX_VALUE"  />

其中 Number.MAX_VALUE 是 java 脚本中允许的最大浮点值，因此在其中添加 - 使其为负值。

Vue 3：html 属性上的条件 v-if

Vue 3: Conditional v-if on hmtl attributes

conditional-statements

vue.js

vuejs3