v-model指令：在表單控件元素上創建雙向數據綁定。v-model 會根據控件類型自動選取正確的方法來更新元素。
實例中演示了 input 和 textarea 元素中使用 v-model 實現雙向數據綁定：
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <p>input 元素：</p> <input v-model="message" placeholder="編輯我……"> <p>消息是: {{ message }}</p> <p>textarea 元素：</p> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="多行文本輸入……"></textarea></div><script>new Vue({ el: '#app', data: { message: 'Runoob', message2: '菜鳥教程/r/nhttp://www.runoob.com' }})</script></body></html>效果如圖：
復選框如果是單個為邏輯值，如果是多個則綁定到同一個數組：
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <p>單個復選框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多個復選框：</p> <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"> <label for="runoob">Runoob</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>選擇的值為: {{ checkedNames }}</span></div><script>new Vue({ el: '#app', data: { checked : false, checkedNames: [] }})</script></body></html>效果如圖：
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <input type="radio" id="runoob" value="Runoob" v-model="picked"> <label for="runoob">Runoob</label> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for="google">Google</label> <br> <span>選中值為: {{ picked }}</span></div><script>new Vue({ el: '#app', data: { picked : 'Runoob' }})</script></body></html>效果如圖：
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app"> <select v-model="selected" name="fruit"> <option value="">選擇一個網站</option> <option value="www.runoob.com">Runoob</option> <option value="www.google.com">Google</option> </select> <div id="output"> 選擇的網站是: {{selected}} </div></div><script>new Vue({ el: '#app', data: { selected: '' }})</script></body></html>效果如圖：
.lazy
在默認情況下， v-model 在 input 事件中同步輸入框的值與數據，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model.lazy="msg" >
.number
如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：
<input v-model.number="age" type="number">
這通常很有用，因為在 type="number" 時 HTML 中輸入的值也總是會返回字符串類型。
.trim
如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：
<input v-model.trim="msg">
總結
以上所述是小編給大家介紹的Vue.js 表單控件操作小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
