v-model
Creates two-way binding between form inputs or components and state.
Syntax
v-model="state" | v-model:name.modifier="state"Parameters
| Name | Type | Required | Description |
|---|---|---|---|
state | any | No | The ref/reactive property kept in sync. |
Returns
directive — Binds value and listens for updates.
Examples
<script setup lang="ts">
import { ref } from 'vue';
const name = ref('');
const agreed = ref(false);
</script>
<template>
<input v-model.trim="name" />
<input type="checkbox" v-model="agreed" />
<p>{{ name }} - {{ agreed }}</p>
</template>
Notes
On native inputs v-model expands to `:value` plus an input/change listener.
Modifiers: `.lazy` (sync on change), `.number` (cast to number), `.trim`.
On components it pairs with defineModel/`update:modelValue`; use arguments
like `v-model:title` for multiple bindings.