VUE大神的成長(zhǎng)之路--表單控件綁定

v-model 并不關(guān)心表單控件初始化所生成的值。因?yàn)樗鼤?huì)選擇 Vue 實(shí)例數(shù)據(jù)來作為具體的值。
文本區(qū)綁定v-model發(fā)方法:
<textarea v-model="message" placeholder="add multiple lines"></textarea>

多個(gè)勾選框,綁定到同一個(gè)數(shù)組:
<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>


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

new Vue({
el: '...',
data: {
checkedNames: []
}
})

對(duì)于單選按鈕,勾選框及選擇列表選項(xiàng), v-model 綁定的 value 通常是靜態(tài)字符串(對(duì)于勾選框是邏輯值):

修飾符:
在默認(rèn)情況下, v-model 在 input 事件中同步輸入框的值與數(shù)據(jù) (除了 上述 IME 部分),但你可以添加一個(gè)修飾符 lazy ,從而轉(zhuǎn)變?yōu)樵?change 事件中同步:
<input v-model.lazy="msg" >

如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為 Number 類型(如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值),可以添加一個(gè)修飾符 number 給 v-model 來處理輸入值:
<input v-model.number="age" type="number">
這通常很有用,因?yàn)樵?type="number" 時(shí) HTML 中輸入的值也總是會(huì)返回字符串類型。

<input v-model.trim="msg">
.trim: 自動(dòng)過濾用戶輸入的首尾空格

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,187評(píng)論 0 29
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:var data = { a:...
    云之外閱讀 2,389評(píng)論 0 6
  • 1.安裝 可以簡(jiǎn)單地在頁面引入Vue.js作為獨(dú)立版本,Vue即被注冊(cè)為全局變量,可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,309評(píng)論 4 129
  • 下載安裝搭建環(huán)境 可以選npm安裝,或者簡(jiǎn)單下載一個(gè)開發(fā)版的vue.js文件 瀏覽器打開加載有vue的文檔時(shí),控制...
    冥冥2017閱讀 6,208評(píng)論 0 42
  • vue.js官網(wǎng)教程學(xué)習(xí)筆記和學(xué)習(xí)摘要 起步 安裝 一個(gè)簡(jiǎn)單的方法,直接把一個(gè)vue.js引入你的HTML頁面中,...
    恰皮閱讀 3,500評(píng)論 2 22

友情鏈接更多精彩內(nèi)容