what is v-model
v-modelIt is an instruction in the Vue framework to implement two-way data binding. It can establish a two-way data channel between form elements (such as input boxes, check boxes, etc.) and data attributes in the Vue instance, so that when the value of the form element changes, the corresponding data attribute will also be changed accordingly. Update; Conversely, when the data attribute in the Vue instance changes, the value of the form element will also be automatically updated.
The syntax format used v-modelis: v-model="变量名", where the variable name is a data attribute defined in the Vue instance. Can be used on multiple form elements at the same time v-modelto achieve two-way data binding; for non-text form elements like check boxes, v-modelthe binding is their selected state.
Use v-model to bind the value of the input box
<div id="app">
<input type="text" v-model="message">
<p>您输入的内容是: {
{ message }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
In the above code, an input box is bound to the message property of the Vue instance. When the user enters content, the value of message will be automatically updated. At the same time, the value of the current message attribute is also displayed in the p tag. This way, user changes to form elements and the in-app display are instantly synchronized.
Use v-model to bind checked state of checkbox
<div id="app">
<input type="checkbox" v-model="isChecked">
<p>{
{ isChecked ? '您已选择' : '您未选择' }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isChecked: false
}
});
</script>
In the above code, the checked state of the checkbox is bound to the isChecked property of the Vue instance. When the user checks/unchecks the checkbox, the value of isChecked is automatically updated. At the same time, the selected state of the current check box is also displayed in the p tag.
The principle of v-model (2.x)
Object.defineProperty()The principle of v-model is implemented using a mechanism called "responsiveness". This mechanism will recursively convert all the attributes in the data object into methods when the Vue instance is created. When the data changes, the getter/settersetter The function notifies the related view to update, thus realizing two-way data binding.
In the context of v-model, when the value of a form element changes, the setter function will be triggered to update the corresponding attribute value in the Vue instance; otherwise, when the data in the Vue instance changes, the getter function will be triggered to obtain the latest value in real time , and pass it to the form element, which updates the DOM view.
The principle of v-model (3.x)
In Vue 3.0, Vue uses Proxyinstead to Object.defineProperty()implement two-way data binding. The data responsive system implemented using Proxy is more flexible and efficient . It can proxy the entire object , instead of only proxying object properties like the Object.defineProperty() method, thus avoiding the problem of recursively listening to each property , and With better performance and more features.