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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
js子页面获取父页面数据示例
May 15 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
vue时间格式化实例代码
Jun 13 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
详解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下读取文本文件的代码
2008/07/02 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
Python日期操作学习笔记
2008/10/07 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python 对象和json互相转换方法
2018/03/22 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Python爬取网页信息的示例
2020/09/24 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
学习型班组申报材料
2014/05/31 职场文书
美术课外活动总结
2014/07/08 职场文书
安全检查汇报材料
2014/12/26 职场文书
英文版辞职信
2015/02/28 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
Python制作表白爱心合集
2022/01/22 Python
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js