Vue.js范围滑块，设置v模型并获得更改

Posted 2021-04-12

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

我正在使用Vue.js，我不知道如何在此设置v模型以及如何获取用户输入的值。

<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>

答案

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

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

并在组件中定义value（但是你要命名它）。

...
data: {
  value: 50 //initial value
}

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