Formularios de Vue.js

En esta sección presentamos el uso de formularios en Vue.js.

Puedes usar la directiva v-model en los elementos de control de formulario para crear un enlace de datos bidireccional.

v-model selecciona automáticamente el método correcto para actualizar el elemento según el tipo de control.

Campo de entrada

El ejemplo demuestra el uso de v-model en los elementos input y textarea para lograr un enlace de datos bidireccional:

<div id="app"> <p>Elemento input:</p> <input v-model="message" placeholder="Edítame..."> <p>El mensaje es: {{ message }}</p> <p>Elemento textarea:</p> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="Entrada de texto multilínea..."></textarea> </div> <script>new Vue({ el: '#app', data: { message: 'Ejemplo', message2: 'Tutorial para novatos\r\nhttp://www.example.com' } })</script>

Pruébalo »

Casilla de verificación

En el caso de las casillas de verificación, si es una sola se enlaza a un valor booleano; si son varias, se enlazan al mismo array:

Casilla de verificación

El siguiente ejemplo demuestra el enlace de datos bidireccional de las casillas de verificación:

<div id="app"> <p>Casilla de verificación individual:</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>Varias casillas de verificación:</p> <input type="checkbox" id="ejemplo" value="Ejemplo" v-model="checkedNames"> <label for="ejemplo">Ejemplo</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>El valor seleccionado es: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>

Pruébalo »

El efecto de marcar las casillas de verificación en el ejemplo se muestra a continuación:

Botón de opción

El siguiente ejemplo demuestra el enlace de datos bidireccional de los botones de opción:

Botón de opción

<div id="app"> <input type="radio" id="ejemplo" value="Ejemplo" v-model="picked"> <label for="ejemplo">Ejemplo</label> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for="google">Google</label> <br> <span>El valor seleccionado es: {{ picked }}</span> </div> <script> new Vue({ el: '#app', data: { picked : 'Ejemplo' } }) </script>

Pruébalo »

Una vez seleccionado, el efecto se muestra a continuación:

Lista desplegable (select)

El siguiente ejemplo demuestra el enlace de datos bidireccional de la lista desplegable:

select

<div id="app"> <select v-model="selected" name="fruit"> <option value="">Selecciona un sitio web</option> <option value="www.example.com">Ejemplo</option> <option value="www.google.com">Google</option> </select> <div id="output">El sitio web seleccionado es: {{selected}}</div> </div> <script> new Vue({ el: '#app', data: { selected: '' } }) </script>

Pruébalo »

Al seleccionar Ejemplo, el resultado se muestra a continuación:

Modificadores

.lazy

De forma predeterminada, v-model sincroniza el valor del campo de entrada con los datos en el evento input, pero puedes añadir el modificador lazy para que la sincronización se realice en el evento change:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number

Si deseas convertir automáticamente el valor de entrada del usuario al tipo Number (si el resultado de la conversión del valor original es NaN, se devuelve el valor original), puedes añadir el modificador number a v-model para procesar el valor de entrada:

<input v-model.number="age" type="number">

Esto suele ser muy útil, porque cuando type="number", el valor introducido en el HTML siempre se devuelve como tipo cadena.

.trim

Si deseas filtrar automáticamente los espacios al principio y al final de la entrada del usuario, puedes añadir el modificador trim a v-model para filtrar la entrada:

<input v-model.trim="msg">
Otras extensiones