Vue.js 范围滑块，设置 v-model 并获取更改

Posted 2023-02-18

【中文标题】Vue.js 范围滑块，设置 v-model 并获取更改

【英文标题】：Vue.js range slider, set v-model and get changes

【发布时间】：2019-02-14 13:08:40

【问题描述】：

我在我的网络表单上放置了一个滑块，供用户输入他们对某件事的评价。

我正在使用 Vue.js，但我不确定如何在此设置 v-model 以及如何获取用户输入的值。

<div v-else class="form-group">
    <form action="">
        <label for="formControlRange">Please drag the slider to decide how much you want to rate between 1 and 10</label>
        <input type="range" class="form-control-range" id="formControlRange">
    </form>
<div>

【参考方案1】：

您只需将 v-model 属性添加到您的范围输入：

<input type="range" class="form-control-range" id="formControlRange" v-model="value">

并在您的组件中定义value（无论您想如何命名）。

...
data: 
  value: 50 //initial value

示例：http://jsfiddle.net/q0Lmv196/

【讨论】：

太棒了，你能帮我在滑块上为用户显示数字吗？

显然有可能将刻度线/标签添加到范围滑块。但目前，没有浏览器支持此功能：developer.mozilla.org/en-US/docs/Web/html/Element/input/… 可能您必须寻找替代品（第三方组件 - 例如这个：npmjs.com/package/bootstrap-slider）

但我无法在显示屏上至少显示`

啊好吧，我误会了

不，这仍然很有用，因为我希望我也可以在滑块上添加一些更好的 UI。