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，可以在下面我参考文章里了解更多。
参考文章：