v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。
先看一下简单的v-model使用
v-model的基本使用 {{message}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NK3t7FfW-1656055213426)(https://juejin.cn/ “点击并拖拽以移动”)]
效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E7eFOh0A-1656055213427)(https://juejin.cn/ “点击并拖拽以移动”)]
为什么要用到v-model？使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。
其使用原理：
v-model的使用原理 {{message}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x7vpjxKq-1656055213427)(https://juejin.cn/ “点击并拖拽以移动”)]
oninput 事件在用户输入时触发。
详情请参考菜鸟教程oninput****
效果与上图一致。
二、v-model结合radio单选按钮使用以前写单选按钮：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MYyWZG7r-1656055213428)(https://juejin.cn/ “点击并拖拽以移动”)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DcdYVLDl-1656055213428)(https://juejin.cn/ “点击并拖拽以移动”)]
现在要实现双向绑定功能，就是点击哪个性别就会显示在h1里
这里就可以把name去掉，添加v-model
{{sex}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uODMMIeN-1656055213428)(https://juejin.cn/ “点击并拖拽以移动”)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v5ULv9rX-1656055213429)(https://juejin.cn/ “点击并拖拽以移动”)]
三、v-model结合checkbox类型的使用这里实现一个同意协议的小功能，先看效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kJTWmxB2-1656055213429)(https://juejin.cn/ “点击并拖拽以移动”)]
代码如下：
复选框
您选择的是：{{isAgree}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dmewXGL1-1656055213430)(https://juejin.cn/ “点击并拖拽以移动”)]
四、v-model结合checkbox类型使用（多选）先看实现效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6fhp9mEr-1656055213430)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cef6a59549334cb1adafea05e2d3dc5d~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ovyLrdLv-1656055213430)(https://juejin.cn/ “点击并拖拽以移动”)]
{{hobbies}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1vNPnCQe-1656055213430)(https://juejin.cn/ “点击并拖拽以移动”)]
五、v-model结合checkbox类型使用（值的绑定）{{hobbies}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qpVX2K7o-1656055213431)(https://juejin.cn/ “点击并拖拽以移动”)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JIpEUjPF-1656055213431)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c698f7061724e96add138080bf946ad~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fHVNu31g-1656055213431)(https://juejin.cn/ “点击并拖拽以移动”)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wf46MDVq-1656055213432)(https://juejin.cn/ “点击并拖拽以移动”)]
六、v-model结合select 1.select单选select单选 你选择的水果有：{{fruit}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aObXNICv-1656055213432)(https://juejin.cn/ “点击并拖拽以移动”)]
效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r2T0nouK-1656055213435)(https://juejin.cn/ “点击并拖拽以移动”)]
2.select多选select多选 你选择的水果有：{{fruits}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MddKOXjc-1656055213435)(https://juejin.cn/ “点击并拖拽以移动”)]
效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Om4p6j5O-1656055213435)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e90f822f6aa4fd2937df87e10566386~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QsvfqPlt-1656055213435)(https://juejin.cn/ “点击并拖拽以移动”)]
七、v-model的修饰符的使用v-model的修饰符：
1、v-model.lazy 只有在input输入框发生一个blur时才触发
2、v-model.trim 将用户输入的前后的空格去掉
3、v-model.number 将用户输入的字符串转换成number
这里看这个例子
v-model.lazy只有在input输入框发生一个blur时才触发
{{message}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AL5qSHso-1656055213436)(https://juejin.cn/ “点击并拖拽以移动”)]
效果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qrYaRMbe-1656055213437)(https://juejin.cn/ “点击并拖拽以移动”)]
v-model.number ：不可以输入字符串
看例子：
{{age}}----{{typeof age}}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-efwnxuAY-1656055213437)(https://juejin.cn/ “点击并拖拽以移动”)]
效果如下：这里输入字符串是输入不了的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7X7ASZYy-1656055213438)(https://juejin.cn/ “点击并拖拽以移动”)]
v-model.trim去除前后空格
代码如下：
{{name}}
