v-model演示
v-model 指令用來在 input、select、textarea、checkbox、radio 等表單控件元素上或者組件上創建雙向數據綁定，根據表單上的值，自動更新綁定的元素的值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box"> <input type="text" v-model.lazy="text1" placeholder="請輸入姓名"> <p>姓名：{{text1}}</p> <input type="checkbox" v-model="text2"> <p>是否90后：{{text2}}</p> <input type="radio" value="男" v-model="text3"> <input type="radio" value="女" v-model="text3"> <p>性別：{{text3}}</p> <select v-model="text4"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <p>您選擇: {{ text4 }}</p> <input type="checkbox" value="蘋果" v-model="text5">蘋果 <input type="checkbox" value="香蕉" v-model="text5">香蕉 <input type="checkbox" value="梨" v-model="text5">梨 <p>你喜歡的水果：{{text5}}</p> </div> </body> <script type="text/javascript" charset="utf-8"> new Vue({ el: "#box", data: { text1: "劉小濤", text2: "true", text3: "保密", text4: "", text5: [], } }) </script> </html>
輸入框，單選，復選，下拉框演示案例；復制可運行。
修飾符
.lazy
在默認情況下， v-model 在 input 事件中同步輸入框的值與數據，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box"> <!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" > <p>{{msg}}</p> </div> </body> <script type="text/javascript" charset="utf-8"> new Vue({ el: "#box", data: { msg: "劉小濤", } }) </script> </html>
.number
如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box"> <input v-model.number="age" type="number"> <p>{{age}}</p> </div> </body> <script type="text/javascript" charset="utf-8"> new Vue({ el: "#box", data: { age: "", } }) </script> </html>
.trim
如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box"> <input v-model.trim="input"> <p>{{input}}</p> </div> </body> <script type="text/javascript" charset="utf-8"> new Vue({ el: "#box", data: { input: "", } }) </script> </html>
v-model原理
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box"> <input v-model="something"/> <!-- 等同 --> <input v-bind:value="something" v-on:input="something = $event.target.value"/> <p>{{something}}</p> </div> </body> <script type="text/javascript" charset="utf-8"> new Vue({ el: "#box", data: { something: "", } }) </script> </html>
解釋：
$event 指代當前觸發的事件對象。
$event.target 指代當前觸發的事件對象的dom
$event.target.value 就是當前dom的value值
在v-on:input方法中，
value => something
在:value中：
something => value
如此，形成了一個閉環，也就是所說的數據的雙向綁定。
滿足語法糖規則：屬性必須為value，方法名必須為：input。
想自定組件實現v-model，可以在下面我參考文章里了解更多。
參考文章：