更新 Vue.js 3 中的范围输入

【问题标题】：Update range input in Vue.js 3更新 Vue.js 3 中的范围输入
【发布时间】：2022-01-23 11:52:53
【问题描述】：

如何在 Vue 3 中更新或显示范围输入的实际值？

我认为这样的 v-model 是可能的：

<input id="rangeSlider" type="range" class="form-range" v-model="value" min="0" max="5" step="0.2"/> 

            <label for="rangeSlider" class="sliderValue">
                Value: {{ value }} m
            </label>

【问题讨论】：

标签： html vue.js input slider vuejs3

【解决方案1】：

它实际上和 Vue2 完全一样，只是 Vue 设置有点不同

const app = Vue.createApp({
    data: () => ({
    value: 0
  })
})
const vm = app.mount('#app')

<script src="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script>
<div id="app">
  <input id="rangeSlider" type="range" class="form-range" v-model="value" min="0" max="5" step="0.2"/> 

  <label for="rangeSlider" class="sliderValue">
    Value: {{ value }} m
  </label>
</div>

【讨论】：