在前端處理(lǐ)表單時(shí)，我們常常需要将表單輸入框的内容同步給 JavaScript 中相應的變量。手動連接值綁定和(hé)更改事(shì)件監聽器可能(néng)會(huì)很(hěn)麻煩：
template
<input
:value="text"
@input="event => text = event.target.value">
v-model 指令幫我們簡化了(le)這(zhè)一步驟：
template
<input v-model="text">
另外(wài)，v-model 還可以用(yòng)于各種不同類型的輸入，<textarea>、<select> 元素。它會(huì)根據所使用(yòng)的元素自(zì)動使用(yòng)對(duì)應的 DOM 屬性和(hé)事(shì)件組合：
文(wén)本類型的 <input> 和(hé) <textarea> 元素會(huì)綁定 value property 并偵聽 input 事(shì)件；
<input type="checkbox"> 和(hé) <input type="radio"> 會(huì)綁定 checked property 并偵聽 change 事(shì)件；
<select> 會(huì)綁定 value property 并偵聽 change 事(shì)件。
注意
v-model 會(huì)忽略任何表單元素上(shàng)初始的 value、checked 或 selected attribute。它将始終将當前綁定的 JavaScript 狀态視(shì)爲數據的正确來(lái)源。你(nǐ)應該在 JavaScript 中使用(yòng)data 選項來(lái)聲明(míng)該初始值。
基本用(yòng)法
文(wén)本
template
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />
Message is:
注意
對(duì)于需要使用(yòng) IME 的語言 (中文(wén)，日文(wén)和(hé)韓文(wén)等)，你(nǐ)會(huì)發現(xiàn) v-model 不會(huì)在 IME 輸入還在拼字階段時(shí)觸發更新。如果你(nǐ)的确想在拼字階段也(yě)觸發更新，請(qǐng)直接使用(yòng)自(zì)己的 input 事(shì)件監聽器和(hé) value 綁定而不要使用(yòng) v-model。
多行文(wén)本
template
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
Multiline message is:
注意在 <textarea> 中是不支持插值表達式的。請(qǐng)使用(yòng) v-model 來(lái)替代：
template
<!-- 錯誤 -->
<textarea>{{ text }}</textarea>
<!-- 正确 -->
<textarea v-model="text"></textarea>
複選框
單一的複選框，綁定布爾類型值：
template
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
false
我們也(yě)可以将多個複選框綁定到(dào)同一個數組或集合的值：
js
export default {
data() {
return {
checkedNames: []
}
}
}
template
<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>
Checked names: []
JackJohnMike
在這(zhè)個例子中，checkedNames 數組将始終包含所有當前被選中的框的值。
單選按鈕
template
<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>
選擇器
單個選擇器的示例如下(xià)：
template
<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> 元素會(huì)渲染成一個“未選擇”的狀态。在 iOS 上(shàng)，這(zhè)将導緻用(yòng)戶無法選擇第一項，因爲 iOS 在這(zhè)種情況下(xià)不會(huì)觸發一個 change 事(shì)件。因此，我們建議(yì)提供一個空(kōng)值的禁用(yòng)選項，如上(shàng)面的例子所示。
多選 (值綁定到(dào)一個數組)：
template
<div>Selected: {{ selected }}</div>
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
選擇器的選項可以使用(yòng) v-for 動态渲染：
js
export default {
data() {
return {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
}
}
template
<select v-model="selected">
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<div>Selected: {{ selected }}</div>
值綁定
對(duì)于單選按鈕，複選框和(hé)選擇器選項，v-model 綁定的值通常是靜态的字符串 (或者對(duì)複選框是布爾值)：
template
<!-- `picked` 在被選擇時(shí)是字符串 "a" -->
<input type="radio" v-model="picked" value="a" />
<!-- `toggle` 隻會(huì)爲 true 或 false -->
<input type="checkbox" v-model="toggle" />
<!-- `selected` 在第一項被選中時(shí)爲字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
但(dàn)有時(shí)我們可能(néng)希望将該值綁定到(dào)當前組件實例上(shàng)的動态數據。這(zhè)可以通過使用(yòng) v-bind 來(lái)實現(xiàn)。此外(wài)，使用(yòng) v-bind 還使我們可以将選項值綁定爲非字符串的數據類型。
複選框
template
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no" />
true-value 和(hé) false-value 是 Vue 特有的 attributes，僅支持和(hé) v-model 配套使用(yòng)。這(zhè)裏 toggle 屬性的值會(huì)在選中時(shí)被設爲 'yes'，取消選擇時(shí)設爲 'no'。你(nǐ)同樣可以通過 v-bind 将其綁定爲其他(tā)動态值：
template
<input
type="checkbox"
v-model="toggle"
:true-value="dynamicTrueValue"
:false-value="dynamicFalseValue" />
提示
true-value 和(hé) false-value attributes 不會(huì)影響 value attribute，因爲浏覽器在表單提交時(shí)，并不會(huì)包含未選擇的複選框。爲了(le)保證這(zhè)兩個值 (例如：“yes”和(hé)“no”) 的其中之一被表單提交，請(qǐng)使用(yòng)單選按鈕作(zuò)爲替代。
單選按鈕
template
<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />
pick 會(huì)在第一個按鈕選中時(shí)被設爲 first，在第二個按鈕選中時(shí)被設爲 second。
選擇器選項
template
<select v-model="selected">
<!-- 内聯對(duì)象字面量 -->
<option :value="{ number: 123 }">123</option>
</select>
v-model 同樣也(yě)支持非字符串類型的值綁定！在上(shàng)面這(zhè)個例子中，當某個選項被選中，selected 會(huì)被設爲該對(duì)象字面量值 { number: 123 }。
修飾符
.lazy
默認情況下(xià)，v-model 會(huì)在每次 input 事(shì)件後更新數據 (IME 拼字階段的狀态例外(wài))。你(nǐ)可以添加 lazy 修飾符來(lái)改爲在每次 change 事(shì)件後更新數據：
template
<!-- 在 "change" 事(shì)件後同步更新而不是 "input" -->
<input v-model.lazy="msg" />
.number
如果你(nǐ)想讓用(yòng)戶輸入自(zì)動轉換爲數字，你(nǐ)可以在 v-model 後添加 .number 修飾符來(lái)管理(lǐ)輸入：
template
<input v-model.number="age" />
如果該值無法被 parseFloat() 處理(lǐ)，那麽将返回原始值。
number 修飾符會(huì)在輸入框有 type="number" 時(shí)自(zì)動啓用(yòng)。
.trim
如果你(nǐ)想要默認自(zì)動去除用(yòng)戶輸入内容中兩端的空(kōng)格，你(nǐ)可以在 v-model 後添加 .trim 修飾符：
template
<input v-model.trim="msg" />
組件上(shàng)的 v-model
如果你(nǐ)還不熟悉 Vue 的組件，那麽現(xiàn)在可以跳過這(zhè)個部分。
HTML 的内置表單輸入類型并不總能(néng)滿足所有需求。幸運的是，我們可以使用(yòng) Vue 構建具有自(zì)定義行爲的可複用(yòng)輸入組件，并且這(zhè)些(xiē)輸入組件也(yě)支持 v-model！要了(le)解更多關于此的内容，請(qǐng)在組件指引中閱讀配合 v-model 使用(yòng)。
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發