两个el-input-number实现金额区间
时间: 2023-11-08 08:10:54 浏览: 150
vue:el-input输入时限制输入的类型操作
5星 · 资源好评率100%
你可以使用两个 `el-input-number` 组件实现金额区间的选择,其中一个用于输入区间的最小值,另一个用于输入区间的最大值。下面是一个简单的示例代码:
```html
<template>
<div>
<el-input-number v-model="minAmount" :controls="false" :min="0" :max="maxAmount"></el-input-number>
-
<el-input-number v-model="maxAmount" :controls="false" :min="minAmount"></el-input-number>
</div>
</template>
<script>
export default {
data() {
return {
minAmount: 0, // 区间最小值
maxAmount: 1000 // 区间最大值
}
}
}
</script>
```
在上面的代码中,我们创建了两个 `el-input-number` 组件,一个用于输入区间的最小值,一个用于输入区间的最大值。我们还通过 `v-model` 指令将这两个组件与 `minAmount` 和 `maxAmount` 变量进行双向绑定,使得它们的值能够随着用户的输入进行更新。
注意,在第二个 `el-input-number` 组件中,我们设置了 `:min` 属性为 `minAmount`,这样就可以确保区间最大值不小于区间最小值。同时,我们也设置了 `:controls` 属性为 `false`,这样可以隐藏组件默认的上下调整按钮,以避免用户误操作。
阅读全文