Nicht viel zu sagen, lassen Sie mich zunächst einen kleinen Fall zeigen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-model -->
<input type="text" v-model:value="ModelMessage">{
{ModelMessage}}<br><br>
<!-- v-bind -->
<input type="text" v-bind:value="BindMessage">{
{BindMessage}}<br><br>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
ModelMessage:"你好,我是Model",
BindMessage:"你好,我是Bind",
}
})
</script>
</body>
</html>
Beispielbild
In diesem Beispiel sehen wir, dass das v-Modell ein bidirektionales Bindungselement ist. Wenn der Wert der Eingabe manuell geändert wird, ändert sich ModelMessage auch dynamisch, v-bind ist jedoch ein einzeiliges Bindungselement Wenn Sie den Wert des Eingabefelds manuell ändern, ändert sich der Wert von BindMessage in Vue nicht.
Der Effekt des V-Modells kann durch V-Bind und V-On erzielt werden.
<input type="text" v-model:value="ModelMessage">{
{ModelMessage}}<br><br>
Gleichwertig
<input type="text" v-bind:value="BindMessage" @input="BindMessage=$event.target.value">{
{BindOnMessage}}<br><br>
Mit anderen Worten, die Essenz hinter dem v-Modell besteht darin, zwei Operationen einzuschließen:
1. v-bind bindet ein Wertattribut;
2. v-on-Befehl bindet das v-on-Ereignis an das aktuelle Element