form 是提供使用者輸入資料的主要機制,
如果你是 Vue 的框架設計者,你會怎麼處理呢?

當然是想辦法
將 form 的 input value 想辦法和 Vue data 綁定在一起囉

怎麼綁?
想也知道,一定是這樣設計
<input type="number" v-model="itemNumber">

這樣就會將 Vue 變數 itemNumber 和 input 的 value 「雙向」綁定 (Two-way Binding)
讓兩邊的值保持一致,也就是任何一邊變動,另外一個也會一起變動

因為這就 Vue 的核心特性 ~
透過 v- 開頭的 directive 將 view 的資料和 Vue 的 data 綁定在一起

為什麼用 v-model 呢?
因為 model (模型) 一詞在程式設計中,常代表和「資料」有關


<div id="app">
  <form>
    <p>Add item</p>
    <p>Item name: <input type="text" required v-model="itemName"></p>
    <p>How many: <input type="number" v-model="itemNumber"></p>
    <button type="submit">Add item</button>
  </form>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        itemName: null,
        itemNumber: null,
        shoppingList: [
          { name: 'Tomatoes', number: 5 }
        ]
      }
    }
  })
  app.mount('#app')
</script>



參考來源
    評語
    請登入後才可以評分
    位置
    資料夾名稱
    Vue.js 學習筆記
    上傳者
    蘇德宙
    單位
    台灣數位員工
    建立
    2025-05-28 12:26:02
    最近修訂
    2025-05-28 12:37:52