Article directory
v-bind, one-way data binding
When we write the code like this, we only use v-bind to one-way bind the attributes of the element within the tag:
<body>
<div id="box">
<input type="text" v-bind:value="name">
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#box',
data: {
name: "这里是name的值",
}
})
</script>
</body>
will show the following effect:
The data in the tag and the data in the Vue instance are one-way bound. The corresponding data changes in the Vue instance will bring the changes in the tag. The data changes, but the data changes in the tag will not change the data in the Vue instance.
Abbreviated form (omitting v-bind, leaving only colon)
<input type="text" :value="name">
Display pictures (without refreshing the page, without modifying the code, only modifying it directly on the page or using Vue developer tools):
Example 1 (change the input box data to: hahahahaha):
The data in the Input input box cannot cause the data in the Vue instance to change together
Effect: The data in the Input changes, but the data in the Vue instance does not change
Example 2 (change the name in the Vue instance to a string: "One-way binding"):
Modifying the Vue instance data can change the Input input box data
Effect: Data changes in the Vue instance can drive changes in the data in Input
v-model, two-way binding of data (not available for all properties)
is mostly used for form elements, and will cause errors for other elements.
Modify the above code to:
<body>
<div id="box">
v-bind:<input type="text" v-bind:value="name">
<p></p>
v-model:<input type="text" v-model:value="name">
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#box',
data: {
name: "这里是name的值",
}
})
</script>
</body>
Just like v-bind can be abbreviated, v-model can also be abbreviated for value.
Abbreviated form (retain v-model, delete colon and value, that is, ":value"):
<input type="text" v-model="name">
No errors will occur
Using v-model, you can achieve two-way binding of data, that is, the data in the input box will affect the data in the Vue instance, and the data in the Vue instance will also affect the data in the Input box.
When displaying pictures (the page is not refreshed, the code is not modified, only modified directly on the page or using Vue developer tools), there is a chain reaction of two-way data binding and one-way data binding. You can carefully self-examine
Example 1 (Input data into the input box corresponding to v-model: hahaha):
Effect: Modifying the data of v-model will change the data in the Vue instance, thereby causing the v-bind input box of one-way data binding to change together.
Example 2 (change the name in the Vue instance to the string "I don't know"):
Effect: Modifying the data in the Vue instance will change the data of v-model and the data of v-bind input box.
Cases where v-model cannot be used:
v-model can only be used in form situations, input class elements, and value values.
Elements without value cannot capture user input data, and there is no path to change data from the element.
Radio button, multi-select box, Input, select, etc. are all fine, they all have value
Example 1 (successful using v-bind):
Sample code:
<body>
<div id="box">
<h1 v-bind:x="name">这里</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#box',
data: {
name: "这里是name的值",
}
})
</script>
</body>
Example picture (using v-bind, the x attribute of the element interface is not lost):
Example 2 (failure using v-model):
Sample code (modify v-bind in sample 1 code to v-model):
<body>
<div id="box">
<h1 v-bind:x="name">这里</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#box',
data: {
name: "这里是name的值",
}
})
</script>
</body>
The x attribute in the h1 tag is missing, and the error can be found in the console (template compilation failed):
This is the end.
如果你觉得这篇文章写的不错，多多点赞~收藏吧！