The role of v-model
- Vue uses the v-model directive to
实现表单元素和数据的双向绑定. - Bind the information submitted by the user in the form to the variables set by the programmer
Different from v-bind
- v-bind: Dynamically update attributes on HTML elements
The principle of v-model
The variable set by the programmer is the value bound by our v-model, which is generally in the data option of the vue instance. So what is the user-submitted information?
In general, we default the information submitted by the user to the value of the value attribute of the form element bound to the v-mode command; of course, this is only a general case, and the information submitted by the user is actually related to different form types.
Next, let's analyze whether the value bound by the v-model instruction of different form types must be the value of the form, and what is the default value of the value without the form type.
text type
basic use
<div id="app">
<input type="text" v-model="message" placeholder="请输入">
<p>输入的内容是:{
{
message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
Result:
At this time, the value value is not set in our input tag, and we print out its value value and the bound message variable in the input method
<div id="app">
<input type="text" v-model="message" placeholder="请输入" @input="test1">
<p>输入的内容是:{
{
message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods: {
test1: function (e) {
console.log('this.message', this.message);
console.log('this.value', this.value);
}
}
})
</script>
At this point, this.message == this.value; that is to say, under the text type, the user information defaults to the value of the form, and the default value is the content in the box.
principle
v-model is actually a grammatical sugar, which essentially contains two operations
- v-bind binds a value attribute
- The v-on directive binds the input event to the current element
So the above code is equivalent to
<div id="app">
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value" placeholder="请输入">
<p>输入的内容是:{
{
message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
You can also define the input event as a method to call
<div id="app">
<input type="text" :value="message" @input="handleInput" placeholder="请输入">
<p>输入的内容是:{
{
message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods: {
handleInput: function (e) {
this.messsge = e.target.value;
}
}
})
</script>
Notice
Above, we got the conclusion without setting the default value for the value of the input, so what if the value is set for the input
<div id="app">
<input type="text" v-model="message" placeholder="请输入" value="123" @input="test1">
<p>输入的内容是:{
{
message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods: {
test1: function (e) {
console.log('this.message', this.message);
console.log('this.value', this.value);
}
}
})
</script>
After running, we found that the result is the same as not setting the default value. This is because, after using v-model, the value displayed by the form control only depends on the bound data, and does not care about the initial value attribute. v-model ignores the initial values of value, checked, and selected attributes of all form elements.
Similarly, the conclusion for textarea is the same:
<textarea v-model="text" placeholder="请输入">frvf</textarea>
- The value bound by the v-model directive is its value
this.text= e.target.value; <textarea> </textarea>Values inserted between frvf will also not take effect
radio type
Value is not assigned
<input type="radio" id="male" v-model="sex" @click="test2">
<script>
var app = new Vue({
el: '#app',
data: {
sex: ''
},
methods: {
test1: function (e) {
console.log('this.sex', this.sex);
console.log('this.value', e.target.value);
}
}
})
</script>
Running result:
this.sex: null
this.value: on
in conclusion:
- In the radio type, if no value is assigned, the user information defaults to null, and the value defaults to on.
After assigning value
<input type="radio" id="male" value="男" v-model="sex" @click="test2">
<p>选择的性别是:{
{
sex}}</p>
<script>
var app = new Vue({
el: '#app',
data: {
sex: ''
},
methods: {
test1: function (e) {
console.log('this.sex', this.sex);
console.log('this.value', e.target.value);
}
}
})
</script>
operation result:
in conclusion:
- In the radio type, after assigning a value, the user information defaults to value, and the value is the set value
principle
<input type="radio" id="male" :checked="sex" value="男" @change="test2">
<p>选择的性别是:{
{
sex }}</p>
test2: function (e) {
this.sex = e.target.value;
}
checkbox type
value is not set, (used alone)
When used alone, bind a boolean value with v-model
<input type="checkbox" id="male" v-model="sex" @click="test2">
<script>
var app = new Vue({
el: '#app',
data: {
sex: false
},
methods: {
test2: function (e) {
console.log('this.sex', this.sex);
console.log('this.value', e.target.value);
}
}
})
</script>
operation result:
set value
<input type="checkbox" id="male" v-model="sex" value="hahahh" @click="test2">
<script>
var app = new Vue({
el: '#app',
data: {
sex: false
},
methods: {
test2: function (e) {
console.log('this.sex', this.sex);
console.log('this.value', e.target.value);
}
}
})
</script>
operation result:
Change the user information type to an array
<input type="checkbox" id="male" v-model="sex" value="hahahh" @click="test2">
<script>
var app = new Vue({
el: '#app',
data: {
sex: []
},
methods: {
test2: function (e) {
console.log('this.sex', this.sex);
console.log('this.value', e.target.value);
}
}
})
</script>
Running results
Principle:
<input type="checkbox" id="male" :checked="sex" value="hahahh" @change="test2">
<p>选择的性别是:{
{
sex }}</p>
test2: function (e) {
this.sex = e.target.value;
}
In summary:
The role of v-model is to bind the variables set by the programmer with user information, but user information is not necessarily bound to value
- In the text type, the user information is bound to the value, and the value is bound to the content in the box.
- In the radio type, only after the value is set, the user information is bound to the value, and the value is bound to the set value.
- In the checkbox type, only after the value is set and the user information data type is set to an array, the user information is bound to the value, and the value is bound to the set value.
v-model internally uses different properties and throws different events for different input elements:
- The text and textarea elements use the value property and input event;
- checkbox and radio use checked property and change event;
- The select field has value as prop and change as event.