2024-12-05 v-model=text ?

發表於 2024-12-12 更新於 2025-09-17 分類於 OneDayOneNote 閱讀次數：

2024-12-05 v-model=text ?

2024-12-05 v-model=text ?

在 Vue 中，v-model 是一個雙向綁定指令，用於在 表單元素（如 <input>、<textarea>、或 <select> 等）和 Vue 的 data 中建立雙向數據綁定。這意味著，當用戶在輸入框中輸入內容時，data 中的對應屬性會自動更新；而如果程式碼中更新了這個屬性，輸入框的顯示內容也會自動更新。

`v-model` 的作用

數據驅動 UI：Vue 會根據 data 的值來更新 DOM。
UI 驅動數據：用戶操作（如輸入內容）會更新 data 的值。

`v-model="text"` 的意思

假設我們有以下代碼：

<template>
  <div>
    <input v-model="text" placeholder="輸入文字">
    <p>你輸入的內容是：{{ text }}</p>
  </div>
</template>

0%