表单实现双向绑定v-model

表单控件在实际开发中非常常见,尤其对于用户信息的提交,需要大量的表单。
vue中通过v-model实现表单元素和数据的双向绑定。
案例:

  • 比如在一个输入框输入内容时,由于input的v-model绑定了message,所以会实时将input框中的value传给message。

  • 另外,当message发生改变时,由于使用了mustach语法(v-bind),将message的值插入到DOM中,DOM实现了双向绑定。

  • 其实v-model只是上述两步骤的语法糖形式,它内部本质上是两个步骤:1. v-bind绑定input的value,将修改的message的值传递给value; 2. 另外,v-on给当前元素绑定input事件.
    -也就是说以下两个代码作用相同
    下面两行代码等同于第一行,第一步将message的值绑定到input表单控件的value中从而显示到页面视图中,这里实现一个单方面model到view的单向绑定;第二步通过v-on:input动态监听表单键入值的改变,通过$event.target.value(一旦界面产生一个事件,浏览器会生成一个event对象)

<input type="text" v-model="message">
-------------------------------------------------
<input type="text" v-bind:value="message"
 v-on:input="message=$event.target.value">

猜你喜欢

转载自blog.csdn.net/ljyahaha/article/details/113786079