The v-model directive creates two-way data binding on form control elements. The so-called two-way binding refers to the data in our vue instance in js that is consistent with the content on the dom element it renders. No matter who is changed, the other party will update to the same data accordingly.
The most basic thing is to achieve a linkage effect
<body>
<div class="app">
<span>Multiline message is:</span>
<p>{{message}}</p>
<br>
<textarea name="" v-model="message" placeholder="please write..."></textarea>
</div>
</body>
<script>
new Vue({
el:'.app'
})
</script>
checkbox
<body>
<div class="app">
<input type="checkbox" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" value="John" v-model="checkedNames">
<label for="jack">John</label>
<input type="checkbox" value="Mike" v-model="checkedNames">
<label for="jack">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>
</div>
</body>
<script>
new Vue({
el:'.app',
data:{
checkedNames:[]
}
})
</script>
v-bind
Some instructions can be separated by an "argument" after its name and a colon in the middle. For example, the v-bind directive is used to responsively update HTML features
Summarize
The above is the use and difference between v-bind v-model introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!