vue自定v-model实现表单数据双向绑定问题
2018-09-03 11:27
1366 查看
vue.js的一大功能便是实现数据的双向绑定,本文给大家介绍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实现表单数据双向绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- vue教程1-01 v-model 一般表单元素(input) 双向数据绑定
- Vue表单demo v-model双向绑定问题
- Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
- vue.js使用v-model指令实现的数据双向绑定功能示例
- Vue.js实现双向数据绑定(表单自动赋值、表单自动取值)
- vue.js双向数据绑定实现原理
- 【学习笔记】Vue中实现双向数据绑定的原理
- vue动态载入变量键值名,实现数据双向绑定
- Vue实现双向绑定的原理以及响应式数据
- vue实现数据双向绑定原理剖析
- Vue 组件实现表单的双向绑定
- Vue.js之视图和数据的双向绑定(v-model)
- 浅谈vue中数据双向绑定的实现原理
- VUE实现表单元素双向绑定(总结)
- vue.js利用defineProperty实现数据的双向绑定
- vue2.0数据双向绑定与表单bootstrap+vue组件
- vue.js v-model数据双向绑定实例
- Vue:实现双向数据绑定
- 5-Vue指令之双向数据绑定 V-model
- Vue实现双向绑定的原理以及响应式数据