十、表单数据绑定v-model的基础使用

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

上面的文字是不是有些熟悉？当然是来源于官方文档了。

v-model用于绑定表单数据，当然也可以获取表单数据了。下面来看一个双向数据绑定的案例。

<div id="app">
    <input type="text" v-model="msg"><br>
    你输入了：{{ msg }}
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            msg:''
        }
    });
</script>

该案例在表单中输入什么了，那么就会在下方即使显示出来。觉得很神奇就对，那么官方的解释来了，v-model仅仅只是一个语法糖。下面通过绑定value属性一探究竟：

<input type="text" v-model="msg"><br>
<input type="text" :value="msg" v-on:input="msg=$event.target.value"><br>
你输入了：{{ msg }}

1）:value为表单绑定属性，动态修改value的值

2）v-on:input为表单绑定一个用户输入时触发的事件

3）当用户输入数据后，触发了绑定的事件，该事件通过$event属性获取输入的值，并将其赋值给msg

2020-12-02