1. v-model: the implementation principle of bidirectional data binding is equivalent to a v-bind plus v-on.
<div id="app">
<!-- <input type="text" v-model="message"> -->
<input type="text" :value="message" @input="message=$event.target.value">
<h2>{{message}}</h2>
</div>
2. v-model combined with radio type
<label for="man">
<input type="radio" id="man" value="male" v-model="sex">
</label>
<label for="Wman">
<input type="radio" id="Wman" value="female" v-model="sex">
</label>
<h2>The gender you choose is:{{sex}}</h2>
3. Use of v-model in combination with checkbox
1. Radio box
<!-- checkbox Radio -->
<label for="agree">
<input type="checkbox" id="agree" v-model="ischange">Agreement of consent
</label>
<h2>You chose:{{ischange}}</h2>
<button :disabled="!ischange">Next step</button><br><br><br>
2. Multi selection box
<!-- checkbox Checkbox -->
<input type="checkbox" value="Basketball" v-model="hobbies">Basketball
<input type="checkbox" value="Football" v-model="hobbies">Football
<input type="checkbox" value="Badminton" v-model="hobbies">Badminton
<input type="checkbox" value="Ping pong ball" v-model="hobbies">Ping pong ball
<input type="checkbox" value="Volleyball" v-model="hobbies">Volleyball
<h2>Your hobbies are:{{hobbies}}</h2>
4. v-model combined with select
1. Radio box
<!-- select Single election -->
<select name="" id="" v-model="fruit">
<option value="watermelon">watermelon</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Strawberry">Strawberry</option>
</select>
<h2>The fruit you choose is:{{fruit}}</h2><br><br>
2. Multi selection box
<!-- select Multiple selection -->
<select name="" id="" v-model="fruits" multiple>
<option value="watermelon">watermelon</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Strawberry">Strawberry</option>
</select>
<h2>The fruit you choose is:{{fruits}}</h2>
5. Value binding: dynamically binding the value of value
<!-- Value binding -->
<label :for="item" v-for="item in fruitHobbies">
<input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
</label>
6. Use of v-model modifier
1. lazy function: when the text box loses focus or press enter, the v-model will update the variables.
<!-- 1,lazy Modifier -->
<label for="active">
<input type="text" id="active" v-model.lazy="message">
</label>
<h2>{{message}}</h2>
2. Number function: convert data type to multiply number type
<! -- 2, number modifier -- >
<! -- when the type of type is number, the value of v-model binding will automatically change to String type -- >
<input type="number" v-model.number="age">
<h2>{{age}}---{{typeof(age)}}</h2>
3. trim function: eliminate the space between strings.
<!-- 3,trim Modifier -->
<input type="text" v-model="trim">
<h2>{{trim}}</h2>
*******Full code*****
<!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>Document</title>
<script src="./js/vue.js"></script>
</head>
<div id="app">
<!-- <input type="text" v-model="message"> -->
<input type="text" :value="message" @input="message=$event.target.value">
<h2>{{message}}</h2><br>
<label for="man">
<input type="radio" id="man" value="male" v-model="sex">
</label>
<label for="Wman">
<input type="radio" id="Wman" value="female" v-model="sex">
</label>
<h2>The gender you choose is:{{sex}}</h2><br>
<!-- checkbox Radio -->
<label for="agree">
<input type="checkbox" id="agree" v-model="ischange">Agreement of consent
</label>
<h2>You chose:{{ischange}}</h2>
<button :disabled="!ischange">Next step</button><br><br><br>
<!-- checkbox Checkbox -->
<input type="checkbox" value="Basketball" v-model="hobbies">Basketball
<input type="checkbox" value="Football" v-model="hobbies">Football
<input type="checkbox" value="Badminton" v-model="hobbies">Badminton
<input type="checkbox" value="Ping pong ball" v-model="hobbies">Ping pong ball
<input type="checkbox" value="Volleyball" v-model="hobbies">Volleyball
<h2>Your hobbies are:{{hobbies}}</h2><br><br><br>
<!-- select Single election -->
<select name="" id="" v-model="fruit">
<option value="watermelon">watermelon</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Strawberry">Strawberry</option>
</select>
<h2>The fruit you choose is:{{fruit}}</h2><br><br>
<!-- select Multiple selection -->
<select name="" id="" v-model="fruits" multiple>
<option value="watermelon">watermelon</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Strawberry">Strawberry</option>
</select>
<h2>The fruit you choose is:{{fruits}}</h2><br><br>
<!-- Value binding -->
<label :for="item" v-for="item in fruitHobbies">
<input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
</label><br><br>
<!-- v-model Use of modifiers -->
<!-- 1,lazy Modifier -->
<label for="active">
<input type="text" id="active" v-model.lazy="message">
</label>
<h2>{{message}}</h2><br>
<!-- 2,number Modifier -->
<!-- When type The type is number Type, v-model The value of the binding automatically becomes String type -->
<input type="number" v-model.number="age">
<h2>{{age}}---{{typeof(age)}}</h2><br>
<!-- 3,trim Modifier -->
<input type="text" v-model="trim">
<h2>{{trim}}</h2>
</div>
<body>
<script>
let vm = new Vue({
el: '#app',
data: () => ({
message: 'v-model Realization principle',
sex: 'male',
age:0,
ischange: true,
hobbies: [],
fruit: 'Banana',
fruits: [],
fruitHobbies: ['watermelon', 'Strawberry', 'Banana', 'Apple', 'Hami melon'],
trim:' Remove spaces on both sides of the string,The console can see it. '
}),
methods: {}
})
</script>
</body>
</html>