VueJS，Javascript-防止输入滑块范围小于当前值

 实现这一点的一种方法是使用vue的watch功能。我们保存"；当前值"；作为一个数据点和v模型有不同的值。在这种情况下，我称之为sliderVal。

---

通过数据的动态限制

如果我们观察CCD_ 3；当前"；价值并作出相应反应。

<template>
<div class="hello">
<label for="slider">{{ sliderVal }}</label>
<input type="range" id="slider" v-model="sliderVal" />
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
limitVal: 0,
sliderVal: 0,
};
},
watch: {
sliderVal(val) {
if (Number(val) < Number(this.limitVal)) {
this.sliderVal = this.limitVal;
}
if (Number(val) > Number(this.limitVal)) {
this.limitVal = val;
}
},
},
};
</script>

在代码Sandbox 上可以找到一个工作示例

---

通过道具的一次时限

如果你想要一个通过道具提供的当前值有一次性限制的版本，我会相应地分叉。然后我们将currentVal作为一个道具，它最初设置拇指的极限，但在变高时不会改变。

<template>
<div class="hello">
<label for="slider">{{ sliderVal }}</label>
<input type="range" id="slider" v-model="sliderVal" />
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
sliderVal: 0,
};
},
props: {
currentVal: {
type: Number,
required: true,
default: 0,
},
},
watch: {
sliderVal(val) {
if (Number(val) < Number(this.currentVal)) {
this.sliderVal = this.currentVal;
}
},
},
created() {
this.sliderVal = this.currentVal;
},
};
</script>

下面是的工作示例