创新互联VUE3教程：Vue3.0表单输入绑定

#基础用法

你可以用 v-model 指令在表单 、</code> 及 <code><select></code> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 <code>v-model</code> 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p><p><img src="/upload/ad_content/xuanchuantu-12.jpg"></p><p>创新互联自2013年起，先为防城等服务建站，防城等地企业，进行企业商务咨询服务。为防城企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。</p><p> 提示</p><p> <code>v-model</code> 会忽略所有表单元素的 <code>value</code>、<code>checked</code>、<code>selected</code> attribute 的初始值而总是将当前活动实例的数据作为数据来源。你应该通过 JavaScript 在组件的 <code>data</code> 选项中声明初始值。</p><p> <code>v-model</code> 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：</p></p><ul> <li>text 和 textarea 元素使用 <code>value</code> property 和 <code>input</code> 事件；</li> <li>checkbox 和 radio 使用 <code>checked</code> property 和 <code>change</code> 事件；</li> <li>select 字段将 <code>value</code> 作为 prop 并将 <code>change</code> 作为事件。</li> </ul> </p><p> 提示</p><p> 对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 <code>v-model</code> 不会在输入法组织文字过程中得到更新。如果你也想处理这个过程，请使用 <code>input</code> 事件。</p></p><h3>#文本 (Text)</h3> </p><pre><code><input v-model="message" placeholder="edit me" /> <p>Message is: {{ message }}</p></code></pre><p>点击此处实现</p></p><h3>#多行文本 (textarea)</h3> </p><pre><code><span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br /> <textarea v-model="message" placeholder="add multiple lines">

点击此处实现

在文本区域插值不起作用，应该使用 v-model 来代替。

{{ text }}

#复选框 (Checkbox)

单个复选框，绑定到布尔值：

{{ checked }}

点击此处实现

多个复选框，绑定到同一个数组：

  
  Jack
  
  John
  
  Mike
  

  Checked names: {{ checkedNames }}

Vue.createApp({
  data() {
    return {
      checkedNames: []
    }
  }
}).mount('#v-model-multiple-checkboxes')

点击此处实现

#单选框 (Radio)

  
  One
  

  
  Two
  

  Picked: {{ picked }}

Vue.createApp({
  data() {
    return {
      picked: ''
    }
  }
}).mount('#v-model-radiobutton')

点击此处实现

#选择框 (Select)

单选时：

  
    Please select one
    A
    B
    C
  
  Selected: {{ selected }}

Vue.createApp({
  data() {
    return {
      selected: ''
    }
  }
}).mount('#v-model-select')

点击此处实现

Note

如果 v-model 表达式的初始值未能匹配任何选项， 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

多选时 (绑定到一个数组)：

A B C
Selected: {{ selected }}

点击此处实现

用 v-for 渲染的动态选项：

  
    
      {{ option.text }}
    
  
  Selected: {{ selected }}

Vue.createApp({
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}).mount('#v-model-select-dynamic')

  ABC

// when checked:
vm.toggle === 'yes'
// when unchecked:
vm.toggle === 'no'

// 当选中时
vm.pick === vm.a

  
  123

// 当被选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123