<input type="text" v-model="message" />
<span>Your input is : {{ message }}</span>
<label><input type="radio" value="male" v-model="gender "> 男</lable>
<label><input type="radio" value="female" v-model="gender "> 女</lable>
<p>{{ gender }}</p>
<input type="checkbox" v-model="checked" />
<span>checked : {{ checked }}</span>
<label><input type="checkbox" value="1" v-model=" multiChecked">1</lable>
<label><input type="checkbox" value="2" v-model=" multiChecked">2</lable>
<label><input type="checkbox" value="3" v-model=" multiChecked">3</lable>
<p>MultiChecked: {{ multiChecked.join('|') }}</p>
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<select v-model="multiSelected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>MultiSelected: {{ multiSelected.join('|') }}</span>
默認(rèn)情況下,v-model 在input 事件中同步輸入框值與數(shù)據(jù),加lazy 屬性后從會(huì)改到在
change 事件中同步暇韧。
<input v-model="query" lazy />
② number
會(huì)自動(dòng)將用戶輸入轉(zhuǎn)為Number 類型巧号,如果原值轉(zhuǎn)換結(jié)果為NaN 則返回原值。
<input v-model="age" number/>
③ debounce
debounce 為設(shè)置的最小延時(shí)煎娇,單位為ms二庵,即為單位時(shí)間內(nèi)僅執(zhí)行一次數(shù)據(jù)更新。該參
數(shù)往往應(yīng)用在高耗操作上缓呛,例如在更新時(shí)發(fā)出ajax 請(qǐng)求返回提示信息催享。
<input v-model="query" debounce="500" />
不過(guò)Vue.js 2.0 中取消了lazy 和number 作為參數(shù),用修飾符(modifier)來(lái)代替:
<input v-model.lazy="query" /> <input v-model.numer="age" />
新增了trim 修飾符哟绊,去掉輸入值首尾空格:
<input v-model.trim="name" />
去除了debounce 這個(gè)參數(shù)造锅,原因是無(wú)法監(jiān)測(cè)到輸入新數(shù)據(jù)闹瞧,但尚未同步到vm 實(shí)例屬
性時(shí)這個(gè)狀態(tài)。如果仍有需要,官方提供了手動(dòng)實(shí)現(xiàn)的例子https://jsbin.com/zefawu/3/
edit?html,output抖格。