Application and principle of v-model
1. Use of V-model
- Form controls are very common in practical development. Especially for the submission of user information, a large number of forms are required.
- Vue uses the v-model instruction to realize the two-way binding of form elements and data.
- Case analysis:
- When we enter something in the input box
- Because the v-model in input is bound with message, the input content will be delivered to message in real time, and message will change.
- When the message is changed, the DOM will respond to the change because we used the Mustache syntax above to insert the value of the message into the dom.
- Therefore, two-way binding is realized through v-model.
- Of course, we can also use v-model for textarea elements
Sample code for v-model
<body>
<div id="app" v-cloak>
<input type="text" v-model="message">
<h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
message: "",
},
})
</script>
</body>
2. Operating principle of V-model
-
v-model is actually a syntax sugar, which essentially contains two operations:
-
v-bind binds a value attribute
-
The v-on instruction binds an input event to the current element
-
In other words, the above code is equivalent to the following code:
<input type="text" v-model="message"> // be equal to <input type="text" v-bind:value="message" @input="message = $event.target.value">
-
Supplementary knowledge: v-on:input = "": listening for input events
For the functions implemented by the above v-model, we can use v-on:input instead. Use @ input to monitor the changes of the input box and assign the value of the input box to message
<body>
<div id="app" v-cloak>
<!-- <input type="text" v-model="message"> -->
<input type="text" v-bind:value="message" @input="valueChange">
<h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
message: "",
},
methods:{
valueChange(event){
this.message = event.target.value;
}
},
})
</script>
</body>
3. v-model is used in combination with checkbox
- Check boxes are divided into two cases: single check box and multiple check boxes
- Single check box:
- v-model is a Boolean value.
- At this time, the value of input does not affect the value of v-model.
- Multiple check boxes:
- When there are multiple check boxes, because multiple can be selected, the attribute in the corresponding data is an array.
- When a is selected, the value of input is added to the array.
<body>
<div id="app" v-cloak>
<!-- Radio -->
<input type="checkbox" name="" id="agree" v-model="isAgree">
<h2>{{isAgree}}</h2>
<button :disabled="!isAgree"> next step</button>
<!-- Checkbox -->
<input type="checkbox" value="Basketball" v-model="hobbies">Basketball
<input type="checkbox" value="Football" v-model="hobbies">Football
<input type="checkbox" value="Table Tennis" v-model="hobbies">Table Tennis
<input type="checkbox" value="badminton" v-model="hobbies">badminton
<h2>Hobbies:{{hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
isAgree: false, // Radio
hobbies:[] // Checkbox
},
})
</script>
</body>
4. v-model is used in combination with select
- Like the checkbox, select can be divided into single selection and multiple selection.
- Single choice: only one value can be selected.
- v-model is bound with a value.
- When we select one of the option s, we will assign its corresponding value to mySelect
- Multiple selection: multiple values can be selected.
- v-model is bound to an array.
- When multiple values are selected, the value corresponding to the selected option will be added to the array mySelects
<body>
<div id="app" v-cloak>
<!-- Single choice -->
<select name="" id="" v-model="mySelect">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="oeange">a mandarin orange</option>
</select>
<p>Your favorite fruit is:{{mySelect}}</p>
<!-- Multiple choice -->
<select name="" id="" v-model="mySelects" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="oeange">a mandarin orange</option>
</select>
<p>Your favorite fruit is:{{mySelects}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data:{
mySelect: "",
mySelects: [],
},
})
</script>
</body>
5. Modifier
-
lazy modifier:
- By default, v-model synchronizes the data of the input box in the input event.
- In other words, once the data changes, the data in the corresponding data will change automatically.
- The lazy modifier allows the data to be updated only when it loses focus or returns
-
number modifier:
- By default, whether we enter letters or numbers in the input box, they will be displayed
Treat as a string type. - However, if we want to deal with digital types, it is best to deal with the content directly as digital.
- The number modifier can automatically convert the content entered in the input box to a number type:
- By default, whether we enter letters or numbers in the input box, they will be displayed
-
trim modifier:
- If there are many spaces at the beginning and end of the input, we usually want to remove them
- The trim modifier can filter the spaces on the left and right sides of the content
<div id="app" v-cloak>
<input type="text" v-model.lazy="message">
<p>Current content:{{message}}</p>
Age:<input type="number" v-model.number="age">
<p>Age:{{age}} Type:{{typeof age}}</p>
<input type="text" v-model.trim="message">
<p>Current content:{{message}}</p>
</div>