表单

表单

表单操作

用 v-model 指令在表单元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素.

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值。它将始终将当前活动实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

Input 单行文本

• input事件

Message is: {{ message }}

Textarea 多行文本

• input事件

Multiline message is:
{{ message }}

插值在 textarea 中不起作用，请使用 v-model 来代替。

Checkbox 复选框

• change事件

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

  
  {{ checked }}
  

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

  
    
    Jack
    
    John
    
    Mike
    
  
    Checked names: {{ checkedNames }}
  
  

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

Radio 单选框

• change事件

  
  One
  

  
  Two
  

  Picked: {{ picked }}

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

Select 选择框

• change事件

• 单选时

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

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

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

  多选时

  • 绑定到一个数组

  A B C
Selected: {{ selected }}

• 用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')