Vue form input binding v-model

1.v-model

v-model specifies that two-way binding of form values ​​and attributes can be achieved. That is, if the value in the form element is changed, the value in the attribute will be automatically updated, and if the value in the attribute is updated, the value in the form will be automatically updated.

2. Binding properties and events

v-model internally uses different attributes for different input elements and throws different events:

• 1. text and textarea elements use value attribute and input event.
• 2. checkbox and radio use checked attribute and change event.
• 3. The select field takes value as prop and change as event.
  

3. Form element binding

3.1 Input Binding

<input v-model="message" placeholder="Please enter...">
<p>The input content is: {{ message }}</p>
 

3.2 Textarea Binding

<span>The input content is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="Please enter multiple lines..."></textarea>
 

3.3 Checkbox Binding

Multiple checkboxes, bound to the same array

<div id="app">
  <input type="checkbox" id="basketball" value="basketball" v-model="hobby">
  <label for="basketball">Basketball</label>
  <input type="checkbox" id="football" value="Football" v-model="hobby">
  <label for="football">Football</label>
  <input type="checkbox" id="volleyball" value="Volleyball" v-model="hobby">
  <label for="volleyball">Volleyball</label>
  <p>{{hobby}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      hobby: []
    }
  })
</script>

3.4 Radio Binding

<div id="app">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
new Vue({
  el: '#app',
  data: {
    picked: ''
  }
})
 

3.5 Select Binding

Single selection:

<div id="#app">
  <select v-model="selected">
    <option disabled value="">Please select</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

When selecting multiple options, just add the multiple attribute

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

4. Value Binding

For radio buttons, checkboxes, and select box options, the value bound to v-model is usually a static string (it can also be a Boolean value for checkboxes)
But sometimes we may want to bind a value to a dynamic property of Vue instance. This can be achieved with v-bind , and the value of this property does not have to be a string.

<div id="app">
  <label v-for="hobby in hobbies">
    <input type="checkbox" :id="hobby" :value="hobby" v-model="testHobby">{{hobby}}
  </label>
  <p>{{testHobby}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      hobbies: ["basketball", "football", "badminton", "table tennis", "tennis"],
      testHobby: []
    }
  })
</script>

4.1 Code Detail

• 1. We created the hobbies array in data to simulate the data returned by the backend. The data is dynamic.
• 2.Another array testHobby is defined, which binds the data in the checkbox to it. As long as the data in the checkbox is checked, it will be added to testHobby
• 3. Use for loop to traverse the data in the hobbies data
• 4. The input tag is bound to the id attribute and value attribute, and the value is the traversed data. You can see it when you open the source code of the web page.
• 5. v-model binds the input tag to testHobby

Finally, let's check the binding effect and the source code of the web page after binding

We can see that the values ​​of id and value after binding are the traversed hobby

5. Modifiers

5.1 .lazy

By default, v-model synchronizes the value of the input box with the data after each input event is triggered. You can add the lazy modifier so that the value only changes when the enter key is pressed or the focus is lost:

<!-- Change value when losing focus or typing enter, not when "input" is pressed -->
<input v-model.lazy="msg">
 

5.2 .number

If you want to automatically convert the user's input value to a numeric type, you can add number modifier to v-model :

<input v-model.number="age" type="number">

This is often useful because the value of HTML input element will always be returned as a string, even when type="number" . If the value cannot be parsed by parseFloat() , the original value is returned.

5.3 .trim

If you want to automatically filter the leading and trailing whitespace characters entered by the user, you can add the trim modifier to v-model :

<input v-model.trim="msg">

This is the end of this article about Vue form input binding v-model . For more relevant Vue v-model content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!