new Vue({   el: '#app',    data: {      price: ''    }  });

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

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

以上代码分几个步骤：

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

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

这样就实现了双向绑定。

关于怎么在vue中自定v-model实现表单数据双向绑定就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

名称栏目：怎么在vue中自定v-model实现表单数据双向绑定
文章路径：http://scyingshan.cn/article/igpohe.html