一、v-model使用原理
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。
先看一下简单的v-model使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model的基本使用</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <h1>{{message}}</h1> <input type="text" v-model="message" /> <input type="text"v-model="message" /> </div> <script type="text/javascript"> const vm = new Vue({ el:'#app', data:{ message:'Nanchen' }, }) </script> </body> </html>
效果如下：
为什么要用到v-model？
使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。
其使用原理：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model的使用原理</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <h1>{{message}}</h1> <input type="text" @input="changeValue" :value="message" /> <!-- <input type="text"v-model="message" /> --> </div> <script type="text/javascript"> const vm = new Vue({ el:'#app', data:{ message:'Nanchen' }, methods:{ changeValue(e){ console.log(e); this.message = e.target.value } } }) </script> </body> </html>
oninput 事件在用户输入时触发。
详情请参考菜鸟教程oninput
效果与上图一致。
二、v-model结合radio单选按钮使用
以前写单选按钮：
<label for="one"> <input type="radio" name="sex" id="one" value="男"/>男 </label> <label for="two"> <input type="radio" name="sex" id="two" value="女"checked="checked" />女 </label> <h1></h1>
现在要实现双向绑定功能，就是点击哪个性别就会显示在h1里
这里就可以把name去掉，添加v-model
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <label for="one"> <input type="radio" id="one" value="男" v-model="sex" />男 </label> <label for="two"> <input type="radio" id="two" value="女" v-model="sex"/>女 </label> <h5>{{sex}}</h5> </div> <script type="text/javascript"> const vm = new Vue({ el:'#app', data:{ sex:'男' }, }) </script> </body> </html>
三、v-model结合checkbox类型的使用
这里实现一个同意协议的小功能，先看效果：
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <h1>复选框</h1> <label for="one"> <input type="checkbox"id="one" v-model="isAgree" />同意协议 </label> <br> 您选择的是：{{isAgree}} <br> <button type="button" :disabled="!isAgree">下一步</button> </div> <script type="text/javascript"> const vm = new Vue({ el:'#app', data:{ isAgree:true }, }) </script> </body> </html>
四、v-model结合checkbox类型使用（多选）
先看实现效果：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <label for="hobby"> <input type="checkbox" id="hobby" value="篮球" v-model="hobbies">篮球 </label> <label for="hobby1"> <input type="checkbox" id="hobby1" value="足球" v-model="hobbies">足球 </label> <label for="hobby2"> <input type="checkbox" id="hobby2" value="羽毛球" v-model="hobbies">羽毛球 </label> <label for="hobby3"> <input type="checkbox" id="hobby3" value="排球" v-model="hobbies">排球 </label> <h2 v-show="hobbies.length>0">{{hobbies}}</h2> </div> <script type="text/javascript"> const vm = new Vue({ el: '#app', data: { hobbies:[] }, }) </script> </body> </html>
五、v-model结合checkbox类型使用（值的绑定）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <label :for="index" v-for="(item,index) in arr" :key="index"> <input type="checkbox" :name="'hobby'+index" :id="index" :value="item" v-model="hobbies" /> {{item}} </label> <h2 v-if="hobbies.length>0">{{hobbies}}</h2> </div> <script type="text/javascript"> const vm = new Vue({ el:'#app', data:{ hobbies:[], arr:['篮球','足球','羽毛球','排球'], }, }) </script> </body> </html>
六、v-model结合select
1.select单选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>select单选</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <select name="fruit" v-model="fruit"> <option value="苹果">苹果</option> <option value="橘子">橘子</option> <option value="水蜜桃">水蜜桃</option> <option value="橙子">橙子</option> </select> <h3>你选择的水果有：{{fruit}}</h3> </div> <script type="text/javascript"> const vm = new Vue({ el:'#app', data:{ fruit:'苹果', }, }) </script> </body> </html>
效果如下：
2.select多选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>select多选</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <select name="fruits" v-model="fruits" multiple="multiple"> <option value="苹果">苹果</option> <option value="橘子">橘子</option> <option value="水蜜桃">水蜜桃</option> <option value="橙子">橙子</option> </select> <h3 v-show="fruits.length>0">你选择的水果有：{{fruits}}</h3> </div> <script type="text/javascript"> const vm = new Vue({ el:'#app', data:{ fruits:[], }, }) </script> </body> </html>
效果如下：
七、v-model的修饰符的使用
v-model的修饰符：
1、v-model.lazy 只有在input输入框发生一个blur时才触发
2、v-model.trim 将用户输入的前后的空格去掉
3、v-model.number 将用户输入的字符串转换成number
这里看这个例子
v-model.lazy
只有在input输入框发生一个blur时才触发
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <h2>{{message}}</h2> <input type="text" v-model.lazy="message"/> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message:'Nan', age:30, name:'chen' }, }) </script> </body> </html>
效果如下：
v-model.number ：不可以输入字符串
看例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <input type="number" v-model.number="age" /> <h2>{{age}}----{{typeof age}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message:'Nan', age:30, name:'chen' }, }) </script> </body> </html>
效果如下：这里输入字符串是输入不了的
v-model.trim
去除前后空格
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <input type="text" v-model.trim="name"> <h2>{{name}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script> const app = new Vue({ el: "#app", data: { message:'Nan', age:30, name:'chen' }, }) </script> </body> </html>
效果如下图：
