1. Basic use of v-model
v-model bidirectional binding, not only the value of the input box changes, but the corresponding message object value will also change. If the value of the message is modified, the value of the input will also change. No matter which value is changed, another value will change.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<input type="text" v-model="message">{{message}}
</div>
<script src="../js/"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "hello"
}
})
</script>
</body>
</html>2. The principle of v-model
First, let’s implement a demo implementation without using v-model to achieve two-way binding.
To implement bidirectional binding, you need to use v-bind and v-on, and use v-bind to bind the message object to the input value. At this time, the message object changes, and the input value will also change. However, changing the value of input will not change the value of message. At this time, a v-on is needed to bind a method to listen for events. When the value of input changes, the latest value is assigned to the message object. Get the event object, target gets the listened object dom, and value gets the latest value.v-model = v-bind + v-on$event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<!-- $eventGet the event object，$Getinputvalue -->
<!-- <input type="text" :value="message" @input="changeValue($)">{{message}}-->
<!--The event call method is passed，Brackets were omitted when writing functions，But the function itself needs to pass a parameter，This parameter is the native eventeventParameters are passed in-->
<input type="text" :value="message" @input="changeValue">{{message}}
</div>
<script src="../js/"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "hello world"
},
methods: {
changeValue(event){
("The value has changed");
=
}
}
})
</script>
</body>
</html>3. Use v-model in combination with radio type
The properties of the radio radio box are mutually exclusive. If you use v-model, you can be mutually exclusive without using name.
v-model binds the `sex` attribute, the initial value is "male". After selecting a female, the `sex` attribute becomes "female", because it is a two-way binding at this time.
<div >
<!-- namepropertyradioMutual Exclusion usev-modelNoname就可以Mutual Exclusion -->
<label for="male">
<input type="radio" name="sex" value="male" v-model="sex">male
</label>
<label for="female">
<input type="radio" name="sex" value="female" v-model="sex">female
</label>
<div>The gender you choose is：{{sex}}</div>
</div>
<script src="../js/"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"zzz",
sex:"male"
},
})
</script>4. Use v-model in combination with check box type
Checkbox can be used as a radio box with v-model or multiple check boxes.
Checkbox combined with v-model to implement a radio box, define the variable initialization to, click the checkbox value, and so on.isAgree false true isAgree true
Checkbox combines v-model to implement multi-check boxes, define array objects, and use them to store hobbies. They will be bound to the checkbox object in two-way. At this time, if a multi-check box is selected, one more true, and an object will be added.hobbies hobbies hhobbies
Single choice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<!--Radio box-->
<h2>Radio box</h2>
<label for="agree">
<input type="checkbox" v-model="isAgree">Agree to the agreement
</label>
<h3>Your choice is：{{isAgree}}</h3>
<button :disabled="!isAgree">Next step</button>
</div>
<script src="/npm/[email protected]/dist/"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isAgree: true
}
})
</script>
</body>
</html>Multiple choices
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<!--Multiple selection boxes-->
<h2>Multiple selection boxes</h2>
<input type="checkbox" name="hobby" value="basketball" v-model="hobbies">basketball
<input type="checkbox" name="hobby" value="football" v-model="hobbies">football
<input type="checkbox" name="hobby" value="badminton" v-model="hobbies">badminton
<input type="checkbox" name="hobby" value="table tennis" v-model="hobbies">table tennis
<h2>Your hobby is：{{hobbies}}</h2>
</div>
<script src="/npm/[email protected]/dist/"></script>
<script>
const app = new Vue({
el: '#app',
data: {
hobbies: []
}
})
</script>
</body>
</html>Value binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<!--Multiple selection boxes-->
<h2>Multiple selection boxes</h2>
<label :for="item" v-for="(item,index) in hhobbies" :key="index">
<input type="checkbox" name="hobby" :value="item" : v-model="hobbies">{{item}}
</label>
<h2>Your hobby is：{{hobbies}}</h2>
</div>
<script src="/npm/[email protected]/dist/"></script>
<script>
const app = new Vue({
el: '#app',
data: {
hobbies: [],
hhobbies: ["basketball","football","table tennis","badminton"]
}
})
</script>
</body>
</html>5. V-model combined with select
V-model combined with select can be selected single or multiple.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-modelCombinedselecttype</title>
</head>
<body>
<div >
<!-- selectSingle choice -->
<select name="fruit" v-model="fruit">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="watermelon">watermelon</option>
</select>
<h2>The fruit you choose is：{{fruit}}</h2>
<!-- selectMultiple choices -->
<select name="fruits" v-model="fruits" multiple>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="watermelon">watermelon</option>
</select>
<h2>The fruit you choose is：{{fruits}}</h2>
</div>
<script src="../js/"></script>
<script>
const app = new Vue({
el:"#app",
data:{
fruit:"apple",
fruits:[]
},
})
</script>
</body>6. Use of v-model modifiers
-
lazy: By default, data is updated in real time. Add, if you lose focus from the input box, press Enter, you will update the data. -
number: The default is string type, and use copy as numeric type -
trim: Used to automatically filter the beginning and end whitespace characters entered by users
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-modelModifier</title>
</head>
<body>
<div >
<h2>v-modelModifier</h2>
<h3>lazy,The default is to update data in real time，Pluslazy，Loss focus from the input box，PressenterAll data will be updated</h3>
<input type="text" ="message">
<div>{{message}}</div>
<h3>Modifiernumber,The default isstringtype，usenumberAssign value tonumbertype</h3>
<input type="number" ="age">
<div>{{age}}--{{typeof age}}</div>
<h3>Modifiertrim:Remove spaces</h3>
<input type="text" ="name">
</div>
<script src="/npm/[email protected]/dist/"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"zzz",
age:18,
name:"ttt"
},
})
</script>
</body>
</html>This is the article about the complete usage of v-model in Vue (the implementation principle of v-model) in Vue. For more relevant content on vue v-model usage, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!