vue中多个el-input输入框实时输入数据,如何实时显示最小值
时间: 2024-04-07 07:33:13 浏览: 61
vue:el-input输入时限制输入的类型操作
5星 · 资源好评率100%
要实时显示多个 `el-input` 输入框中的最小值,你可以使用 `watch` 监听输入框的变化,并在回调函数中更新最小值。下面是一个示例:
```vue
<template>
<div>
<el-input v-for="(input, index) in inputs" :key="index" v-model="input" @input="updateMinValue" />
<p>最小值:{{ minValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputs: [],
minValue: null,
};
},
watch: {
inputs: {
deep: true,
handler(newInputs) {
this.minValue = Math.min(...newInputs);
},
},
},
methods: {
updateMinValue() {
// do nothing
},
},
};
</script>
```
在上面的示例中,`inputs` 数组存储了每个输入框的值,`minValue` 存储了当前的最小值。通过监听 `inputs` 数组的变化,当输入框的值发生变化时,`watch` 中的回调函数会被触发,计算新的最小值并更新 `minValue`。这样,你就可以实时地显示多个输入框中的最小值了。
请注意,为了确保监听到数组的变化,我们在 `watch` 中使用了 `deep: true` 选项来深度监听数组的变化。
阅读全文