vue自定v-model实现表单数据双向绑定问题


Posted in Javascript onSeptember 03, 2018

vue.js的一大功能便是实现数据的双向绑定,本文给大家介绍vue自定v-model实现表单数据双向绑定,具体内容如下所示:

vue自定v-model实现表单数据双向绑定问题

子组件代码如下

vue自定v-model实现表单数据双向绑定问题

v-model语法糖

v-model实现了表单输入的双向绑定,我们一般是这么写的:

<div id="app">
  <input v-model="price">
 </div>
new Vue({
  el: '#app',
   data: {
     price: ''
   }
 });

通过该语句实现price变量与输入值双向绑定

实际上v-model只是一个语法糖,真正的实现是这样的:

<input type="text" 


:value="price" 



@input="price=$event.target.value">

以上代码分几个步骤:

1.将输入框的值绑定到price变量上,这个是单向绑定,意味着改变price变量的值可以改变input的value,但是改变value不能改变price

2.监听input事件(input输入框都有该事件,当输入内容时自动触发该事件),当输入框输入内容就单向改变price的值

这样就实现了双向绑定。

总结

以上所述是小编给大家介绍的vue自定v-model实现表单数据双向绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中的replace方法使用介绍
Oct 28 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
详解vue-cli下ESlint 配置说明
Sep 03 #Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 #Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 #Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 #Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 #Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 #Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 #Javascript
You might like
php 中include()与require()的对比
2006/10/09 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
Python单元测试实例详解
2018/05/25 Python
python 画函数曲线示例
2019/12/04 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
个人简历自我鉴定
2013/10/11 职场文书
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
业务员简历自我评价
2014/03/06 职场文书
贷款委托书
2014/08/01 职场文书
项目申请汇报材料
2014/08/16 职场文书
社会实践的活动方案
2014/08/22 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
我收到了德劲DE1107
2022/04/05 无线电
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android
Android存储中最基本的文件存储方式
2022/04/30 Java/Android
mysql序号rownum行号实现方式
2022/12/24 MySQL