Vue Two-Way Binding with v-model

v-model creates a two-way binding between a form input and a reactive data property — it combines :value binding and @input listening into one directive.

Basic Usage

<script setup>
import { ref } from 'vue'
const name    = ref('')
const message = ref('')
const agreed  = ref(false)
const size    = ref('medium')
const hobbies = ref([])
</script>

<template>
  <!-- text input -->
  <input v-model="name" placeholder="Your name" />
  <p>Hello, {{ name }}</p>

  <!-- textarea -->
  <textarea v-model="message"></textarea>

  <!-- checkbox -->
  <input type="checkbox" v-model="agreed" /> I agree

  <!-- select -->
  <select v-model="size">
    <option>small</option>
    <option>medium</option>
    <option>large</option>
  </select>

  <!-- multiple checkboxes bound to array -->
  <input type="checkbox" value="reading" v-model="hobbies" /> Reading
  <input type="checkbox" value="coding"  v-model="hobbies" /> Coding
</template>

v-model Modifiers

<!-- trim whitespace -->
<input v-model.trim="name" />

<!-- cast to number -->
<input type="number" v-model.number="age" />

<!-- sync on change event instead of input -->
<input v-model.lazy="search" />