Two-Way Binding with v-model

Vue allows you to connect input fields directly to reactive data using the v-model directive. This creates a two-way binding between the input and the data.

<script setup>
import { ref } from "vue";

const name = ref("");
</script>

<template>
  <input v-model="name" placeholder="Enter your name" />
  <p>{{ name }}</p>
</template>

When the user types in the input field, the value of name updates automatically. When the value changes in JavaScript, the input field also updates.

This two-way connection keeps the UI and data in sync without manual event handling.

v-model is commonly used in forms to collect and manage user input.