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