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

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

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

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

<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">id</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"app"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">input</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">type</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"text"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-model</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"msg"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">br</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    你输入了：{{ msg }}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(199, 146, 234)">var</span> <span style="box-sizing: border-box">app</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">new</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Vue</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(128, 203, 174)">el</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"#app"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(128, 203, 174)">data</span>:{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(128, 203, 174)">msg</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">''</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span>

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

<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">input</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">type</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"text"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-model</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"msg"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">br</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">input</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">type</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"text"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">:value</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"msg"</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">v-on:input</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"msg=$event.target.value"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">br</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">你输入了：{{ msg }}</span>

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

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

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

我是小白，期待和优秀的你一起同行!

小白

2020年12月02日