Previous remarks

This article describes Vue form control binding in detail

 

Basic usage

You can use the v-model instruction to create two-way data binding on form control elements. It automatically selects the right method to update elements according to the type of control. v-model is essentially just grammatical sugar, which monitors user input events to update data

[Note] v-model ignores the initial values of the value, checked, selected properties of all form elements. Because it chooses the Vue instance data as the specific value. The initial value should be declared in the data option of the JS component

[type:text]

<div id="example">
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:''
  }
})
</script>

[textarea]

<div id="example">
  <div>
    <span>Multiline message is:</span>
    <p style="white-space: pre-line">{{ message }}</p>    
  </div>
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:''
  }
})
</script>

[Note] Interpolation in text areas (<textarea> </textarea>) will not take effect, instead of using v-model

[type:checkbox]

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

<script>
var example = new Vue({
  el: '#example',
  data:{
    checked:false
  }
})
</script>

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

<script>
var example = new Vue({
  el: '#example',
  data:{
    checkedNames:[]
  }
})
</script>

[type:radio]

<div id="example">
  <div>
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>    
  </div>
  <div>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>    
  </div>
  <div>Picked: {{ picked }}</div>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    picked:''
  }
})
</script>

[select]

RadioButtonList

<div id="example">
  <select v-model="selected">
    <option disabled value="">Please choose</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    selected: ''
  }
})
</script>

[Note] If v-model expresses that the initial value does not match any of the options, the < Select > element will be rendered as unchecked. In iOS, this prevents the user from choosing the first option, because in such a case, iOS does not trigger a change event. Therefore, it is recommended to provide disabled options like the one above.

multiple select list

<div id="example">
  <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    selected: []
  }
})
</script>

Dynamic Options

Rendering with v-for

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

<script>
var example = new Vue({
  el: '#example',
  data:{
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})
</script>

 

Binding value

For radio buttons, check boxes, and select list options, the value of the v-model binding is usually a static string (for check boxes, a logical value)

<!-- When elected,`picked` For strings "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` by true or false -->
<input type="checkbox" v-model="toggle">
<!-- When elected,`selected` For strings "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

But to bind value to a dynamic property of a Vue instance, it can be implemented with v-bind, and the value of this property can be non-string

[Check box]

<div id="example">
  <input type="checkbox" v-model="toggle" :true-value="a" :false-value="b">
  <span>{{ toggle }}</span>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    toggle:'',
    a:true,
    b:false
  }
})
</script>

[radio button]

<div id="example">
  <input type="radio" v-model="pick" :value="a">
  <span>{{ pick }}</span>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    pick:'',
    a:true
  }
})
</script>

[Selection List]

<div id="example">
  <select v-model="selected">
    <option :value="{ number: 123 }">123</option>
    <option :value="{ number: 234 }">234</option>
    <option :value="{ number: 345 }">345</option>
  </select>
    <span>Selected: {{ selected.number }}</span>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    selected:''
  }
})
</script>

 

Modifier

[.lazy]

By default, v-model synchronizes the values and data of the input box in the input event, but can add a modifier, lazy, to convert to synchronization in the change event

In the following example, data is synchronized only when the cursor moves out of the input box

<div id="example">
  <input v-model.lazy="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:''
  }
})
</script>

[.number]

If you want to automatically convert the user's input value to Number type (return the original value if the original value is converted to NaN), you can add a modifier number to v-model to process the input value.

This is usually useful because the value entered in HTML always returns the string type when type="number"

<div id="example">
  <div>
    <input v-model="age1" type="number">
    <span>{{type1}}</span>
    <p>Ordinary input: {{ age1 }}</p>    
  </div>
  <div>
    <input v-model.number="age2" type="number">
    <span>{{type2}}</span>
    <p>number Modifier input: {{ age2 }}</p>    
  </div>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    age1:'',
    age2:'',
  },
  computed:{
    type1:function(){
      return typeof(this.age1)
    },
    type2:function(val){
      return typeof(this.age2)
    },
  }
})
</script>

[.trim]

If you want to automatically filter the first and last spaces of user input, you can add trim modifier to filter input on v-model.

<div id="example">
  <input v-model.trim="msg">
  <p>msg is: {{ msg }}</p>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    msg:''
  }
})
</script>