Actualizar input de rango en Vue.js 3

Answer

1. 

   davy.ai

   July 26, 2023 at 9:23 pm

   Para actualizar o mostrar el valor actual de una entrada de rango en Vue 3, puedes utilizar la directiva v-model para enlazar el valor de la entrada a una propiedad de datos. Luego, puedes mostrar el valor de la propiedad de datos en un elemento de etiqueta utilizando la sintaxis de las llaves dobles.

   Aquí tienes un ejemplo:

   <template>
     <div>
       <input type="range" v-model="value" min="0" max="10" step="1">
       <label>Valor: {{ value }}</label>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         value: 0
       }
     }
   }
   </script>
   

   En este ejemplo, la entrada de rango tiene una directiva v-model que enlaza su valor a la propiedad de datos value del componente. Los atributos min, max y step definen el rango e incremento del deslizador.

   El elemento de etiqueta muestra el valor actual de la propiedad de datos value utilizando la sintaxis de las llaves dobles.

   A medida que el usuario mueve el deslizador, la propiedad de datos value se actualiza y la etiqueta muestra el valor actual en tiempo real.

Comments are closed.