Vue bidirectional binding
5, Bidirectional binding
1. What is bidirectional data binding?
Vue.js is an MV VM framework, that is, two-way data binding, that is, when the data changes, the view changes, and when the view changes, the data changes synchronously. This is the essence of vue.js.
it is worth noting that what we call data bidirectional binding must be that non UI controls will not involve data bidirectional binding for UI controls. One way data binding is a prerequisite for using state management tools. If we use vue x, the data flow is also single, which will conflict with two-way data binding.
2. Why do you want to realize two-way binding of data?
In Vue.js, if vuex is used, the data is actually one-way. The reason why it is two-way data binding is the UI control used. For us to process forms, Vue.js's two-way data binding is particularly comfortable. That is, the two are not mutually exclusive, and a single item is used in the global data flow to facilitate tracking; Local data flow is bidirectional and easy to operate.
3. Use two-way data binding in forms
You can use the v-model command to create two-way data bindings on forms, and elements. It automatically selects the correct method to update the element according to the control type. It is responsible for monitoring user input events to update data, and some special processing for some extreme scenarios.
Note: v-model ignores the initial values of the value, checked and selected attributes of all form elements, and always takes the data of Vue instances as the data source. You should declare the initial value in the data option of the component through JavaScript!
-
Single line text, multi line text
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>
Single line text:<input type="text" v-model="message">{{message}}
</p>
<p>
Multiline text:<textarea v-model="message"></textarea>{{message}}
</p>
</div>
<!--Import Vue.js-->
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"123"
}
});
</script>
</body>
</html>
-
check box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div id="app1">
Single check box:
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
<div id="app2">
Multiple check boxes:
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="join" value="Join" v-model="checkedNames">
<label for="join">Jack</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<span>Selected value:{{checkedNames}}</span>
</div>
</div>
<!--Import Vue.js-->
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm1= new Vue({
el:"#app1",
data:{
checked:false
}
});
var vm2 = new Vue({
el:"#app2",
data:{
checkedNames:[]
}
});
</script>
</body>
</html>
-
Select button
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="radio" name="sex" value="male" v-model="picked">
<input type="radio" name="sex" value="female" v-model="picked">
<span>Gender:{{picked}}</span>
</div>
<!--Import Vue.js-->
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
picked:"male"
}
});
</script>
</body>
</html>
-
Drop down box
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<select v-model="pan">
<option value="" disabled>··Please select gender··</option>
<option>male</option>
<option>female</option>
<option>in</option>
</select>
<span>
Gender:{{pan}}
</span>
</div>
<!--Import Vue.js-->
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
pan:""
}
});
</script>
</body>
</html>
Note: if the initial value of the v-model expression fails to match any options, the meta system will be rendered as "unchecked". In iOS, this will prevent the user from selecting the first option, because in this case, iOS will not trigger the change event. Therefore, it is more recommended to provide a disabled option with a blank value as above.