Vue.js表单输入绑定

表单输入绑定​

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：

template

v-model 指令帮我们简化了这一步骤：

template

另外，v-model 还可以用于各种不同类型的输入，</code>、<code><select></code> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：</p> <ul> <li>文本类型的 <code><input></code> 和 <code><textarea></code> 元素会绑定 <code>value</code> property 并侦听 <code>input</code> 事件；</li> <li><code><input type="checkbox"></code> 和 <code><input type="radio"></code> 会绑定 <code>checked</code> property 并侦听 <code>change</code> 事件；</li> <li><code><select></code> 会绑定 <code>value</code> property 并侦听 <code>change</code> 事件。</li> </ul> <p>注意</p> <p><code>v-model</code> 会忽略任何表单元素上初始的 <code>value</code>、<code>checked</code> 或 <code>selected</code> attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用响应式系统的 API来声明该初始值。</p> <h3 id="basic-usage">基本用法​</h3> <h4 id="text">文本​</h4> <p>template</p> <pre><code class="language-XML"><p>Message is: { { message }}</p> <input v-model="message" placeholder="edit me" /></code></pre> <p>Message is:</p> <p></p> <p><span class="link-card-box"><span class="link-title">在演练场中尝试一下</span><span class="link-link"><img class="link-link-icon" src="http://img.e-com-net.com/image/info8/c6e3a250f227474e80943a2deffb8374.jpg" width="0" height="0">https://play.vuejs.org/#eNo9jUEOgyAQRa8yYUO7aNkbNOkBegM2RseWRGACoxvC3TumxuX/+f+9ql5Ez31D1SlbpuyJoSBvNLjoA6XMUCHjAg2WnAJomWoXXZxSLAwBSxk/CP2xuWl9d9GaP0YAEhgDrSOjJABLw/s8+NJBrde/NWsOpWPrI20M+yOkGdfeqXPiFAhowm9aZ8zS4+wPv/RGjtZcJtV+YpNK1g==</span></span></p> <p></p> <p>注意</p> <p>对于需要使用 IME 的语言 (中文，日文和韩文等)，你会发现 <code>v-model</code> 不会在 IME 输入还在拼字阶段时触发更新。如果你的确想在拼字阶段也触发更新，请直接使用自己的 <code>input</code> 事件监听器和 <code>value</code> 绑定而不要使用 <code>v-model</code>。</p> <h4 id="multiline-text">多行文本​</h4> <p>template</p> <pre><code class="language-XML"><span>Multiline message is:</span> <p style="white-space: pre-line;">{ { message }}</p> <textarea v-model="message" placeholder="add multiple lines">

Multiline message is: