這篇文章主要介紹了Vue表單輸入綁定的示例代碼,本文使用v-model指令在表單input創建雙向數據綁定,非常具有實用價值,需要的朋友可以參考下
基礎用法
你可以用v-model指令在表單input,textarea以及select元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。儘管有些神奇,但是v-model本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據。
v-model會忽略所有表單元素的value, checked, selected特性的初始值而總是將Vue實例的數據作爲數據來源。你應該通過JavaScript在組件的data選項中聲明初始值。
(1) 文本
<input v-model="message" placehoder="edit me">
(2) 多行文本
<textarea v-model="message"></textarea>
(3) 複選框
單個複選框,綁定到布爾值:
<input type="checkbox" v-model="checked">
多個複選框,綁定到同一個數組:
<div id='example-3'> <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> <br> <span>Checked names: {{ checkedNames }}</span> </div> new Vue({ el: '#example-3', data: { checkedNames: [] } })
(4) 單選按鈕
<div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> new Vue({ el: '#example-4', data: { picked: '' } })
(5) 選擇框
單選時:
<div id="example-5"> <select v-model="selected"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> new Vue({ el: '...', data: { selected: '' } })
如果 v-model 表達式的初始值未能匹配任何選項,<select> 元素將被渲染爲“未選中”狀態。在 iOS 中,這會使用戶無法選擇第一個選項。因爲這樣的情況下,iOS 不會觸發 change 事件。因此,更推薦像上面這樣提供一個值爲空的禁用選項。
多選時(綁定到一個數組)
<div id="example-6"> <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </div> new Vue({ el: '#example-6', data: { selected: [] } })
值綁定
對於單選按鈕,複選框以及選擇框的選項,v-model綁定的值通常是靜態字符串(對於複選框也可以是布爾值):
<!-- 當選中時,`picked` 爲字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 爲 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 當選中第一個選項時,`selected` 爲字符串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select>
(1) 複選框
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" >
這裏的 true-value 和 false-value 特性並不會影響輸入控件的 value 特性,因爲瀏覽器在提交表單時並不會包含未被選中的複選框。如果要確保表單中這兩個值中的一個能夠被提交,(比如“yes”或“no”),請換用單選按鈕。
(2) 單選按鈕
<input type="radio" v-model="pick" v-bind:value="a"> // 當選中時 vm.pick === vm.a
修飾符
(1) .lazy
在默認情況下,v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。你可以添加 lazy 修飾符,從而轉變爲使用 change 事件進行同步:
(2) .number
如果想自動將用戶的輸入值轉爲數值類型,可以給 v-model 添加 number 修飾符
(3) trim
如果要自動過濾用戶輸入的首尾空白字符,可以給 v-model 添加 trim 修飾符:
示例:
// >>>>>>> html <div id="app" > <!-- 輸入框綁定 --> <input v-model='massage' placeholder="輸入信息" > <p>massage is:{{ massage }}</p> <hr> <!-- 單個選框綁定,返回值爲布爾值 --> <p>單個選框綁定,返回值爲布爾值:</p> <input v-model='radioStatus' type="checkbox" name="isAgree"> <br> <label>數據:{{radioStatus}}</label> <hr> <!-- 多個選框綁定到同一個數據 --> <div> <p> 多個選框綁定同一個數據: </p> <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> <br> <!-- checkedNames 爲一個數組 [] --> <span>數據: {{ checkedNames }}</span> </div> <hr> <div> <p>單選按鈕數據:</p> <input type="radio" id="one" value="1" v-model="sex"><label for="one">{{stantic.garder[1]}}</label> <input type="radio" id="two" value="2" v-model="sex"><label for="two">{{ stantic.garder[2] }}</label> <input type="radio" id="three" value="3" v-model="sex"><label for="three">{{ stantic.garder[3] }}</label> <br> <!-- sex === 選中的input的value --> <span>性別代碼: {{ sex }};性別:{{stantic.garder[sex]}}</span> </div> <hr> <div> <p>選擇列表:</p> <select v-model="selected"> <option disabled value="">請選擇</option> <option value="001" >北京</option> <option value="003" >天津</option> <option value="008" >上海</option> </select> <span>Selected: {{ selected }}</span> </div> <hr> <div> <h3>值綁定:</h3> <p> 對於單選按鈕,勾選框及選擇列表選項,v-model 綁定的 value 通常是靜態字符串 (對於勾選框是邏輯值): <br> 但是有時我們想綁定 value 到 Vue 實例的一個動態屬性上,這時可以用 v-bind 實現,並且這個屬性的值可以不是字符串。 </p> <!-- vm.toggle 和 vm.stantic.isOrNot 綁定 --> <label>是否畢業:</label> <input type="checkbox" name="" v-model='toggle' v-bind:true-value=stantic.isOrNot[1] v-bind:false-value=stantic.isOrNot[0] > <!-- 選中時 vm.toggle === stantic.isOrNot[1] 未選中時 vm.toggle === stantic.isOrNot[0] --> <p>您選擇了:{{toggle}}</p> <h4>選擇列表的值綁定字面量對象:</h4> <select v-model="selected2"> <!-- 內聯對象字面量 --> <option v-bind:value="{ number: 123 }">123</option> <option v-bind:value="{ number: 456 }">456</option> <option v-bind:value="{ number: 789 }">789</option> </select> <span>vm.selected={{selected2}}</span> </div> <hr> <div> <h3>修飾符</h3> <h4>.lazy</h4> <p>在默認情況下,v-model 在 <mark>input</mark> 事件中同步輸入框的值與數據 (除了 上述 IME 部分),但你可以添加一個修飾符 lazy ,從而轉變爲在 <mark>change</mark> 事件中同步:</p> <input v-model.lazy='massage' > <p>輸入完成,信息改變:{{massage}}</p> <h4>.number</h4> <p>如果想自動將用戶的輸入值轉爲 Number 類型 (如果原值的轉換結果爲 NaN 則返回原值),可以添加一個修飾符 number 給 v-model 來處理輸入值:</p> <!-- vm.age的值類型是Number --> <input type="number" v-model.number='age' > <span>類型爲:{{ typeof age }}</span> <h4>.trim</h4> <p>如果要自動過濾用戶輸入的首尾空格,可以添加 trim 修飾符到 v-model 上過濾輸入:</p> <input v-model.trim='massage' > </div> </div> // >>>>>>js // 基礎用法 v-model let vm = new Vue({ el:'#app', data:{ massage:'', radioStatus:false, checkedNames:[], sex:'', age:'', toggle:'', selected:'', selected2:'', stantic:{ garder:{ 1:'男', 2:'女', 3:'不確定' }, Hobbies:{ 1:'電影', 2:'美食', 3:'遊戲', 4:'科技' }, isOrNot:{ 1:'是', 0:'否' } } } });
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。