Vue in form

v-model is used in the instruction input, select, checkbox, radio and other form control element to create a two-way data binding, it will automatically select the correct method to update the control type according to the form elements.

v-model essentially is just syntactic sugar, which is responsible for monitoring the user's input event to update the data, and some extreme scenarios do some special treatment.

v-model ignores value, checked, all the initial values ​​of selected characteristics to form elements of data Vue but always as an example of the data source. You should be declared initial value of the option component of the data through JavaScript.

v-model in the interior of the respective input elements use different properties and throw different events: text and textarea element and attribute value using an input event; CheckBox and radio and use checked property change events; select and change the value as prop as an event.

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

Single check box is bound to a Boolean value:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

Multiple checkboxes, bound to the same array:

<div id='example-3'>
  <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>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

When the drop-down selection box radio:

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

When bound to an array of drop-down selection box multiple choice:

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

Form modifiers:

1. .lazy: By default, v-model in the value of the data from each input event will trigger synchronization input box, you can add .lazy modifier, thereby into use change event synchronization.
2. .number: If the user wants to automatically input value into a numeric type, you can add to the v-model number modifier.

   This is useful, because even when type = "number", HTML input element's value will always return the string. .

3. .trim: To automatically filtered and last blank character input by the user, can be added to the v-model trim modifier.