1.双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <input type="text" name="" id="" v-model="message"> <h2>{{message}}</h2> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { message:'Tes' }, computed: { }, methods: { }, filters: { } }) </script> </body> </html>v-model的手动实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <input type="text" name="" id="" @input="ipt" :value="message"> <h2>{{message}}</h2> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { message:'Tes' }, computed: { }, methods: { ipt(event){ this.message=event.target.value; } }, filters: { } }) </script> </body> </html>2.v-model和radio的绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <input type="radio" name="sex" v-model="sex" value="男" id="male">男</input> <input type="radio" name="sex" v-model="sex" value="女" id="famale">女</input> <h1>您选择的性别是：{{sex}}</h1> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { sex:'男' }, computed: { }, methods: { }, filters: { } }) </script> </body> </html>radio在没有绑定v-model时，需要为同类单选指定一样的name才能互斥，而绑定了相同的v-model就不用了，注意必须绑定了id radio才会有默认的选择。v-model给radio绑定的是value值。
3.v-model和checkbox的绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <!--checkbox单选框--> <label for="agree"> <input type="checkbox" id="agree" value="aGreeOrNot" v-model="aGreeOrNot">同意协议 </label> <h2>你选择的是:{{aGreeOrNot}}</h2> <button :disabled="!aGreeOrNot">下一步</button> <br> <!--checkbox多选框--> <input type="checkbox" value="TES" v-model="loving">TES <input type="checkbox" value="JDG" v-model="loving">JDG <input type="checkbox" value="LGD" v-model="loving">LGD <input type="checkbox" value="SN" v-model="loving">SN <h2>您支持的战队是：{{loving}}</h2> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { aGreeOrNot:false, loving:[] }, computed: { }, methods: { }, filters: { } }) </script> </body> </html>checkbox的单选框是绑定的真假值，选中为真值，没有选中是假值，多选框绑定的value值的数组，选中那么把选中的value值加入数组中。注意checkbox会根据value值来判断选择的值。
4.v-model和selecter的绑定
单选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <select v-model="player"> <option value="ai">艾弗森</option> <option value="sc">库里</option> <option value="kd">杜兰特</option> <option value="pg">乔治</option> </select> <h2>你最喜欢的球员是：{{player}}</h2> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { player:'ai' }, computed: { }, methods: { }, filters: { } }) </script> </body> </html>注意，v-model需要绑定在selecter下，绑定的是标签的value属性。
多选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div id="jdg"> <select v-model="player" multiple> <option value="ai">艾弗森</option> <option value="sc">库里</option> <option value="kd">杜兰特</option> <option value="pg">乔治</option> </select> <h2>你喜欢的球员有：{{player}}</h2> </div> <script src="../vue.js"></script> <script> const app = new Vue({ el: '#jdg', data: { player:[] }, computed: { }, methods: { }, filters: { } }) </script> </body> </html>多选需要给selecter加上multiple属性，绑定的是选择框的value属性数组。
5.v-model指令的修饰符
lazy修饰符：默认情况下，v-model是在input事件中同步输入框数据的，加上这个修饰可以让数据在失去交点或者回车时才会更新
number修饰符：默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当作字符串类型处理，如果我们加上这个修饰则可以把输入框中的内容自动转换成数字类型
trim类型：如果输入框中输入的内容首尾有很多空格，我们加上这个修饰可以过滤掉内容两边的空格
