表单输入绑定

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

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

另外， v-model 还可以用于各种不同类型的输入， <textarea> 、 <select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
<input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
<select> 会绑定 value property 并侦听 change 事件。

注意

v-model 会忽略任何表单元素上初始的 value 、 checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用 data 选项响应式系统的 API 来声明该初始值。

基本用法

文本

Message is:

在演练场中尝试一下

注意

对于需要使用 IME 的语言 (中文，日文和韩文等)，你会发现 v-model 不会在 IME 输入还在拼字阶段时触发更新。如果你的确想在拼字阶段也触发更新，请直接使用自己的 input 事件监听器和 value 绑定而不要使用 v-model 。

多行文本

Multiline message is:

</div><div class="composition-api"><a href="https://play.vuejs.org/#eNo9jktuwzAMRK9CaON24XrvKgZ6gN5AG8FmGgH6ECKdJjB891D5LYec9zCb+SH6Oq9oRmN5roEEGGWlyeWQqFSBDSoeYYdjLQk6rXYuuzyXzAIJmf0fwqF1Prru02U7PDQq0CCYKHrBlsQy+Tz9rlFCDBnfdOBRqfa7twhYrhEPzvyfgmCvnxlHoIp9w76dmbbtDe+7HdpaBQUv4it6OPepLBjV8Gw5AzpjxlOJC1a9+2WB1IZQRGhWVqsdXgb1tfDcbvYbJDRqLQ==" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div><div class="options-api"><a href="https://play.vuejs.org/#eNo9jk2OwyAMha9isenMIpN9hok0B+gN2FjBbZEIscDpj6LcvaZpKiHg2X6f32L+mX+uM5nO2DLkwNK7RHeesoCnE85RYHEJwKPg1/f2B8gkc067AhipFDxTB4fDVlrro5ce237AKoRGjihUldjCmPqjLgkxJNoxEEqnrtp7TTEUeUT6c+Z2CUKNdgbdxZmaavt1pl+Wj3ldbcubUegumAnh2oyTp6iE95QzoDEGukzRU9Y6eg9jDcKRoFKLUm27E5RXxTu7WZ89/G4E" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div>注意在 <code><textarea></code> 中是不支持插值表达式的。请使用 <code>v-model</code> 来替代：<div class="language-template"><button title="Copy Code" class="copy"/>template<pre class="shiki github-dark vp-code"><code> <textarea>{{ text }}</textarea>  <textarea v-model="text"></textarea></code></pre></div><h3 id="checkbox" tabindex="-1">复选框 <a class="header-anchor" href="#checkbox" aria-label="Permalink to "复选框 {#checkbox}""></a></h3>单一的复选框，绑定布尔类型值：<div class="language-template"><button title="Copy Code" class="copy"/>template<pre class="shiki github-dark vp-code"><code><input type="checkbox" id="checkbox" v-model="checked" /> <label for="checkbox">{{ checked }}</label></code></pre></div><div class="demo"><input type="checkbox" id="checkbox-demo"/><label for="checkbox-demo">false</label></div><div class="composition-api"><a href="https://play.vuejs.org/#eNpVjssKgzAURH/lko3tonVfotD/yEaTKw3Ni3gjLSH/3qhUcDnDnMNk9gzhviRkD8ZnGXUgmJFS6IXTNvhIkCHiBAWm6C00ddoIJ5z0biaQL5RvVNCtmwvFhFfheLuLqqIGQhvMQLgm4tqFREDfgJ1gGz36j2Cg1TkvN+sVmn+JqnbtrjDDiAYmH09En/PxphTebqsK8PY4wMoPslBUxQ==" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div><div class="options-api"><a href="https://play.vuejs.org/#eNpVjtEKgzAMRX8l9Gl72Po+OmH/0ZdqI5PVNnSpOEr/fVVREEKSc0kuN4sX0X1KKB5Cfbs4EDfa40whMljsTXIMWXsAa9hcrtsOEJFT9DsBdG/sPmgfwDHhJpZl1FZLycO6AuNIzjAuxGrwlBj4R/jUYrVpw6wFDPbM020MFt0uoq2a3CycadFBH+Lpo8l5jwWlKLle1QcljwCi/AH7gFic" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div>我们也可以将多个复选框绑定到同一个数组或<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set" target="_blank" rel="noreferrer">集合</a>的值：<div class="composition-api"><div class="language-js"><button title="Copy Code" class="copy"/>js<pre class="shiki github-dark vp-code"><code>const checkedNames = ref([])</code></pre></div></div><div class="options-api"><div class="language-js"><button title="Copy Code" class="copy"/>js<pre class="shiki github-dark vp-code"><code>export default { data() { return { checkedNames: [] }</code></pre></div></div><div class="language-template"><button title="Copy Code" class="copy"/>template<pre class="shiki github-dark vp-code"><code><div>Checked names: {{ checkedNames }}</div> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label></code></pre></div><div class="demo"><div>Checked names: []</div><input type="checkbox" id="demo-jack" value="Jack"/><label for="demo-jack">Jack</label><input type="checkbox" id="demo-john" value="John"/><label for="demo-john">John</label><input type="checkbox" id="demo-mike" value="Mike"/><label for="demo-mike">Mike</label></div>在这个例子中，<code>checkedNames</code> 数组将始终包含所有当前被选中的框的值。<div class="composition-api"><a href="https://play.vuejs.org/#eNqVkUtqwzAURbfy0CTtoNU8KILSWaHdQNWBIj8T1fohyybBeO+RbOc3i2e+vHvuMWggHyG89x2SLWGtijokaDF1gQunbfAxwQARaxihjt7CJlc3wgmnvGsTqAOqBqsfabGFXSm+/P69CsfovJVXckhog5EJcwJgle7558yBK+AWhuFxaRwZLbVCZ0K70CVIp4A7Qabi3h8FAV3l/C9Vk797abpy/lrim/UVmkt/Gc4HOv+EkXs0UPt4XeCFZHQ6lM4TZn9w9+YlrjFPCC/kKrPVDd6Zv5e4wjwv8ELezIxeX4qMZwHduAs=" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div><div class="options-api"><a href="https://play.vuejs.org/#eNqVUc1qxCAQfpXBU3tovS9WKL0V2hdoenDjLGtjVNwxbAl592rMpru3DYjO5/cnOLLXEJ6HhGzHxKmNJpBsHJ6DjwQaDypZgrFxAFqRenisM0BEStFdEEB7xLZD/al6PO3g67veT+XIW16Cr+kZEPbBKsKMAIQ2g3yrAeBqwjjeRMI0CV5kxZ0dxoVEQL8BXxo2C/f+3DAwOuMf1XZ5HpRNhX5f4FPvNdqLfgnOBK+PsGqPFg4+rgmyOAWfiaK5o9kf3XXzArc0zxZZnJuae9PhVfPHAjc01wRZnP/Ngq8/xaY/yMW74g==" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div><h3 id="radio" tabindex="-1">单选按钮 <a class="header-anchor" href="#radio" aria-label="Permalink to "单选按钮 {#radio}""></a></h3><div class="language-template"><button title="Copy Code" class="copy"/>template<pre class="shiki github-dark vp-code"><code><div>Picked: {{ picked }}</div> <input type="radio" id="one" value="One" v-model="picked" /> <label for="one">One</label> <input type="radio" id="two" value="Two" v-model="picked" /> <label for="two">Two</label></code></pre></div><div class="demo"><div>Picked: </div><input type="radio" id="one" value="One"/><label for="one">One</label><input type="radio" id="two" value="Two"/><label for="two">Two</label></div><div class="composition-api"><a href="https://play.vuejs.org/#eNqFkDFuwzAMRa9CaHE7tNoDxUBP0A4dtTgWDQiRJUKmHQSG7x7KhpMMAbLxk3z/g5zVD9H3NKI6KDO02RPDgDxSbaPvKWWGGTJ2sECXUw+VrFY22timODCQb8/o4FhWPqrfiNWnjUZvRmIhgrGn0DCKAjDOT/XfCh1gnnd+WYwukwJYNj7SyMBXwqNVuXE+WQXeiUgRpZyaMJaR5BX11SeHQfTmJi1dnNiE5oQBupR3shbC6LX9Posvpdyz/jf1OksOe85ayVqIR5bR9z+o5Qbc6oCk" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div><div class="options-api"><a href="https://play.vuejs.org/#eNqNkEEOAiEMRa/SsFEXyt7gJJ5AFy5ng1ITIgLBMmomc3eLOONSEwJ9Lf//pL3YxrjqMoq1ULdTspGa1uMjhkRg8KyzI+hbD2A06fmi1gAJKSc/EkC0pwuaNcx2Hme1OZSHLz5KTtYMhNfoNGEhUsZ2zf6j7vuPEQyDkmVSBPzJ+pgJ6Blx04qkjQ2tAGsYgkcuO+1yGXF6oeU1GHTM1Y1bsoY5fUQH55BGZcMKJd/t31l0L+WYdaj0V9Zb2bDim6XktAcxvADR+YWb" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div><h3 id="select" tabindex="-1">选择器 <a class="header-anchor" href="#select" aria-label="Permalink to "选择器 {#select}""></a></h3>单个选择器的示例如下：<div class="language-template"><button title="Copy Code" class="copy"/>template<pre class="shiki github-dark vp-code"><code><div>Selected: {{ selected }}</div> <select v-model="selected"> <option disabled value="">Please select one</option> <option>A</option> <option>B</option> <option>C</option> </select></code></pre></div><div class="demo"><div>Selected: </div><select><option disabled="disabled" value="" selected="selected">Please select one</option><option>A</option><option>B</option><option>C</option></select></div><div class="composition-api"><a href="https://play.vuejs.org/#eNp1j7EOgyAQhl/lwmI7tO4Nmti+QJOuLFTPxASBALoQ3r2H2jYOjvff939wkTXWXucJ2Y1x37rBBvAYJlsLPYzWuAARHPaQoHdmhILQQmihW6N9RhW2ATuoMnQqirPQvFw9ZKAh4GiVDEgTAPdW6hpeW+sGMf4VKVEz73Mvs8sC5stoOlSVYF9SsEVGiLFhMBq6wcu3IsUs1YREEvFUKD1udjAaebnS+27dHOT3g/yxy+nHywM08PJ3KksfXwJ2dA==" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div><div class="options-api"><a href="https://play.vuejs.org/#eNp1j1ELgyAUhf/KxZe2h633cEHbHxjstReXdxCYSt5iEP333XIJPQSinuN3jjqJyvvrOKAohAxN33oqa4tf73oCjR81GIKptgBakTqd4x6gRxp6uymAgAYbQl1AlkVvXhaeeMg8NbMg7LxRhKwAZPDKlvBK8WlKXTDPnFzOI7naMF46p9HcarFxtVgBRpyn1lnQbVBvwwWjMgMyycTToAr47wZnUeaR3mfL6sC/H/iPnc/vXS9gIfP0UTH/ACgWeYE=" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div><div class="tip custom-block">注意如果 <code>v-model</code> 表达式的初始值不匹配任何一个选择项，<code><select></code> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。</div>多选 (值绑定到一个数组)：<div class="language-template"><button title="Copy Code" class="copy"/>template<pre class="shiki github-dark vp-code"><code><div>Selected: {{ selected }}</div> <select v-model="selected" multiple> <option>A</option> <option>B</option> <option>C</option> </select></code></pre></div><div class="demo"><div>Selected: []</div><select multiple="multiple"><option>A</option><option>B</option><option>C</option></select></div><div class="composition-api"><a href="https://play.vuejs.org/#eNp1kL2OwjAQhF9l5Ya74i7QBhMJeARKTIESIyz5Z5VsAsjyu7NOQEBB5xl/M7vaKNaI/0OvRSlkV7cGCTpNPVbKG4ehJYjQ6hMkOLXBwYzRmfLK18F3GbW6Jt3AKkM/+8Ov8rKYeriBBWmH9kiaFYBszFDtHpkSYnwVpCSL/JtDDE4+DH8uNNqulHiCSoDrLRm0UyWzAckEX61l8Xh9+psv/vbD563HCSxk8bY0y45u47AJ2D/HHyDm4MU0dC5hMZ/jdal8Gg8wJkS6A3nRew4=" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div><div class="options-api"><a href="https://play.vuejs.org/#eNp1UEEOgjAQ/MqmJz0oeMVKgj7BI3AgdI1NCjSwIIbwdxcqRA4mTbsznd2Z7CAia49diyIQsslrbSlMSuxtVRMofGStIRiSEkBllO32rgaokdq6XBBAgwZzQhVAnDpunB6++EhvncyAsLAmI2QEIJXuwvvaPAzrJBhH6U2/UxMLHQ/doagUmksiFmEioOCU2ho3krWVJV2VYSS9b7Xlr3/424bn1LMDA+n9hGbY0Hs2c4J4sU/dPl5a0TOAk+/b/rwsYO4Q4wdtRX7l" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div>选择器的选项可以使用 <code>v-for</code> 动态渲染：<div class="composition-api"><div class="language-js"><button title="Copy Code" class="copy"/>js<pre class="shiki github-dark vp-code"><code>const selected = ref('A') const options = ref([ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ])</code></pre></div></div><div class="options-api"><div class="language-js"><button title="Copy Code" class="copy"/>js<pre class="shiki github-dark vp-code"><code>export default { data() { return { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } }</code></pre></div></div><div class="language-template"><button title="Copy Code" class="copy"/>template<pre class="shiki github-dark vp-code"><code><select v-model="selected"> <option v-for="option in options" :value="option.value"> {{ option.text }} </option> </select> <div>Selected: {{ selected }}</div></code></pre></div><div class="composition-api"><a href="https://play.vuejs.org/#eNplkMFugzAQRH9l5YtbKYU7IpFoP6CH9lb3EMGiWgLbMguthPzvXduEJMqNYUazb7yKxrlimVFUop5arx3BhDS7kzJ6dNYTrOCxhwC9tyNIjkpllGmtmWJ0wJawg2MMPclGPl9N60jzx+Z9KQPcRfhHFch3g/IAy3mYkVUjIRzu/M9fe+O/Pvo/Hm8b3jihzDdfr8s8gwewIBzdcCZkBVBnXFheRtvhcFTiwq9ECnAkQ3Okt54Dm9TmskYJqNLR3SyS3BsYct3CRYSFwGCpusx/M0qZTydKRXWnl9PHBlPFhv1lQ6jL6MZl+xoR/gFjPZTD" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div><div class="options-api"><a href="https://play.vuejs.org/#eNp1kMFqxCAQhl9l8JIWtsk92IVtH6CH9lZ7COssDbgqZpJdCHn3nWiUXBZE/Mdvxv93Fifv62lE0Qo5nEPv6ags3r0LBBov3WgIZmUBdEfdy2s6AwSkMdisAAY0eCbULVSn6pCrzlPv7NDCb64AzEB4J+a+LFYHmDozYuyCpfTtqJ+b21Efz6j/gPtpn8xl7C8douaNl2xKUhaEV286QlYAMgWB6e3qNJp3JXIyJSLASErFyMUFBjbZ2xxXCWijkXJZR1kmsPF5g+s1ACybWdmkarLSpKejS0VS99Pxu3wzT8jOuF026+2arKQRywOBGJfE" target="_blank" rel="noreferrer">在演练场中尝试一下</a></div><h2 id="value-bindings" tabindex="-1">值绑定 <a class="header-anchor" href="#value-bindings" aria-label="Permalink to "值绑定 {#value-bindings}""></a></h2>对于单选按钮，复选框和选择器选项，<code>v-model</code> 绑定的值通常是静态的字符串 (或者对复选框是布尔值)：<div class="language-template"><button title="Copy Code" class="copy"/>template<pre class="shiki github-dark vp-code"><code> <input type="radio" v-model="picked" value="a" />  <input type="checkbox" v-model="toggle" />  <select v-model="selected"> <option value="abc">ABC</option> </select></code></pre></div>但有时我们可能希望将该值绑定到当前组件实例上的动态数据。这可以通过使用 <code>v-bind</code> 来实现。此外，使用 <code>v-bind</code> 还使我们可以将选项值绑定为非字符串的数据类型。<h3 id="checkbox-1" tabindex="-1">复选框 <a class="header-anchor" href="#checkbox-1" aria-label="Permalink to "复选框 {#checkbox-1}""></a></h3><div class="language-template"><button title="Copy Code" class="copy"/>template<pre class="shiki github-dark vp-code"><code><input type="checkbox" v-model="toggle" true-value="yes" false-value="no" /></code></pre></div><code>true-value</code> 和 <code>false-value</code> 是 Vue 特有的 attributes，仅支持和 <code>v-model</code> 配套使用。这里 <code>toggle</code> 属性的值会在选中时被设为 <code>'yes'</code>，取消选择时设为 <code>'no'</code>。你同样可以通过 <code>v-bind</code> 将其绑定为其他动态值：<div class="language-template"><button title="Copy Code" class="copy"/>template<pre class="shiki github-dark vp-code"><code><input type="checkbox" v-model="toggle" :true-value="dynamicTrueValue" :false-value="dynamicFalseValue" /></code></pre></div><div class="tip custom-block">提示<code>true-value</code> 和 <code>false-value</code> attributes 不会影响 <code>value</code> attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。为了保证这两个值 (例如：“yes”和“no”) 的其中之一被表单提交，请使用单选按钮作为替代。</div><h3 id="radio-1" tabindex="-1">单选按钮 <a class="header-anchor" href="#radio-1" aria-label="Permalink to "单选按钮 {#radio-1}""></a></h3><div class="language-template"><button title="Copy Code" class="copy"/>template<pre class="shiki github-dark vp-code"><code><input type="radio" v-model="pick" :value="first" /> <input type="radio" v-model="pick" :value="second" /></code></pre></div><code>pick</code> 会在第一个按钮选中时被设为 <code>first</code>，在第二个按钮选中时被设为 <code>second</code>。<h3 id="select-options-2" tabindex="-1">选择器选项 <a class="header-anchor" href="#select-options-2" aria-label="Permalink to "选择器选项 {#select-options-2}""></a></h3><div class="language-template"><button title="Copy Code" class="copy"/>template<pre class="shiki github-dark vp-code"><code><select v-model="selected">  <option :value="{ number: 123 }">123</option>

表单输入绑定 ​

基本用法 ​

文本 ​

多行文本 ​

表单输入绑定

基本用法

文本

多行文本