Directiva v-model en Vue3

Vue3 内置指令Directivas integradas de Vue3

v-modelLa directiva se utiliza para crear un enlace de datos bidireccional en elementos de entrada de formulario y componentes.

Descripción básica

v-modelLa directiva crea un enlace de datos bidireccional en elementos de formulario y componentes. Selecciona automáticamente el método correcto para actualizar el elemento según el tipo de control.

  • Tipo esperado: Varía según el tipo de elemento del formulario
  • Función: Crea un enlace de datos bidireccional en elementos de entrada de formulario y componentes.

Uso básico

1. Entrada de texto

Ejemplo

<template>
  <div>
    <input v-model="message" placeholder="Ingrese contenido" />
    <p>Contenido ingresado: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { message: '' }
  }
}
</script>

2. Casilla de verificación

Ejemplo

<template>
  <div>
    <input type="checkbox" id="agree" v-model="agreed" />
    <label for="agree">Acepto los términos</label>
    <p>Aceptado: {{ agreed }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { agreed: false }
  }
}
</script>

Modificadores

  • .lazy: Sincroniza después del evento change (en lugar de input)
  • .number: Convierte automáticamente a número
  • .trim: Elimina automáticamente los espacios al principio y al final

Ejemplo

<input v-model.lazy="lazyInput" placeholder="Sincronizar al perder el foco" />
<input v-model.number="age" type="number" placeholder="Convertir automáticamente a número" />
<input v-model.trim="username" placeholder="Eliminar espacios" />

Vue3 内置指令Directivas integradas de Vue3

Otras extensiones