摘要

v-model 指令在表單元素和資料之間建立了「雙向資料綁定」，極大地簡化了處理使用者輸入的程式碼。

定義與說明

v-model 實質上是 v-bind:value 和 v-on:input 的語法糖。它確保了：

當使用者在表單中輸入時，對應的資料變數會自動更新。

當資料變數在程式碼中被改變時，表單顯示的內容也會自動更新。

實作範例

Vue SFC

<script setup>
import { ref } from 'vue';
const message = ref('');
</script>
<template>
  <input v-model="message" placeholder="請輸入..." />
  <p>你輸入的是: {{ message }}</p>
</template>

結論

v-model 是處理表單的基石。它將狀態同步的複雜性完全隱藏，讓我們能以極其簡單的方式處理使用者輸入，是 Vue 提升開發效率的關鍵特性。

v-model 雙向綁定表單輸入