表單輸入繫結

在前端處理表單時，我們通常需要將表單輸入元素的狀態與 JavaScript 中的對應狀態同步。手動連線值繫結和更改事件監聽器可能會很麻煩

模板

<input
  :value="text"
  @input="event => text = event.target.value">

v-model 指令幫助我們簡化上述操作

模板

<input v-model="text">

此外，v-model 可以用於不同型別的輸入，如 <textarea> 和 <select> 元素。它將自動擴充套件到不同的 DOM 屬性和事件對，根據所使用的元素而變化

具有文字型別的 <input> 和 <textarea> 元素使用 value 屬性和 input 事件；
<input type="checkbox"> 和 <input type="radio"> 使用 checked 屬性和 change 事件；
<select> 使用 value 作為屬性，並使用 change 作為事件。

注意

v-model 會忽略在任何表單元素上找到的初始 value、checked 或 selected 屬性。它始終將當前繫結的 JavaScript 狀態視為真實來源。您應該在 JavaScript 端宣告初始值，使用 data 選項反應式 API。

基本用法

文字

模板

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

訊息是

在遊樂場中嘗試

注意

對於需要輸入法 (IME) 的語言（中文、日語、韓語等），您會注意到在 IME 組合期間 v-model 不會更新。如果您還想對這些更新做出響應，請使用您自己的 input 事件監聽器和 value 繫結，而不是使用 v-model。

多行文字

模板

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

多行訊息是

在遊樂場中嘗試

請注意，在 <textarea> 中的插值不起作用。請使用 v-model。

模板

<!-- bad -->
<textarea>{{ text }}</textarea>

<!-- good -->
<textarea v-model="text"></textarea>

複選框

單個複選框，布林值

模板

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

false

在遊樂場中嘗試

我們還可以將多個複選框繫結到同一陣列或 Set 值

const checkedNames = ref([])

export default {
  data() {
    return {
      checkedNames: []
    }
  }
}

模板

<div>Checked names: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>

已選名字：[]

JackJohnMike

在這種情況下，checkedNames 陣列將始終包含當前選中的複選框的值。

在遊樂場中嘗試

單選按鈕

模板

<div>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>

選擇

一個二

在遊樂場中嘗試

選擇

單個選擇

模板

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

已選擇

在遊樂場中嘗試

注意

如果您的 v-model 表示式的初始值與任何選項都不匹配，則 <select> 元素將以“未選擇”狀態渲染。在 iOS 上，這會導致使用者無法選擇第一個選項，因為 iOS 在這種情況下不會觸發更改事件。因此，建議提供一個帶有空值的停用選項，如上例所示。

多選（繫結到陣列）

模板

<div>Selected: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

已選擇：[]

在遊樂場中嘗試

選擇選項可以使用 v-for 動態渲染

const selected = ref('A')

const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])

export default {
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}

模板

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>Selected: {{ selected }}</div>

在遊樂場中嘗試

值繫結

對於單選框、複選框和選擇選項，v-model 繫結值通常是靜態字串（對於複選框是布林值）

模板

<!-- `picked` is a string "a" when checked -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` is either true or false -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` is a string "abc" when the first option is selected -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但有時我們可能想要將值繫結到當前活動例項的動態屬性上。我們可以使用 v-bind 來實現這一點。此外，使用 v-bind 還允許我們將輸入值繫結到非字串值。

複選框

模板

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

true-value 和 false-value 是 Vue 特定的屬性，只能與 v-model 一起使用。在此，當複選框被選中時，toggle 屬性的值將設定為 'yes'，當未選中時設定為 'no'。您還可以使用 v-bind 將它們繫結到動態值。

模板

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

提示

由於瀏覽器在表單提交時不包括未選中的複選框，因此 true-value 和 false-value 屬性不會影響輸入的 value 屬性。為了保證在表單中提交兩個值之一（例如“是”或“否”），請使用單選按鈕。

單選按鈕

模板

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

當第一個單選按鈕被選中時，pick 將設定為 first 的值，當第二個被選中時設定為 second 的值。

選擇選項

模板

<select v-model="selected">
  <!-- inline object literal -->
  <option :value="{ number: 123 }">123</option>
</select>

v-model 還支援非字串值的值繫結！在上面的示例中，當選項被選中時，selected 將設定為物件字面量的值 { number: 123 }。

修飾符

`.lazy`

預設情況下，v-model 在每次 input 事件後（如上所述，除 IME 組合外）同步輸入與資料。您可以將 lazy 修飾符新增到同步後 change 事件。

模板

<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" />

`.number`

如果您希望使用者輸入自動轉換為數字，您可以將 number 修飾符新增到您的 v-model 輸入。

模板

<input v-model.number="age" />

如果無法使用 parseFloat() 解析值，則使用原始（字串）值。特別是，如果輸入為空（例如使用者清除輸入欄位後），則返回空字串。此行為與 DOM 屬性 valueAsNumber 不同。

如果輸入具有 type="number"，則自動應用 number 修飾符。

`.trim`

如果您希望自動從使用者輸入中刪除空白，您可以將 trim 修飾符新增到您的 v-model 輸入。

模板

<input v-model.trim="msg" />

`v-model` 與元件

如果您還不熟悉 Vue 的元件，您現在可以跳過這部分。

HTML 內建的輸入型別不一定能滿足您的需求。幸運的是，Vue 元件允許您構建具有完全自定義行為的可重用輸入。這些輸入甚至可以與 v-model 一起使用！要了解更多資訊，請閱讀元件指南中的使用 v-model。

在 GitHub 上編輯此頁面

表單輸入繫結 ​

基本用法 ​

文字 ​

多行文字 ​

複選框 ​

單選按鈕 ​

選擇 ​

值繫結 ​

複選框 ​

單選按鈕 ​

選擇選項 ​

修飾符 ​

.lazy ​

.number ​

.trim ​

v-model 與元件 ​

表單輸入繫結

基本用法

文字

多行文字

複選框

單選按鈕

選擇

值繫結

複選框

單選按鈕

選擇選項

修飾符

`.lazy`

`.number`

`.trim`

`v-model` 與元件