Quelle est l'utilisation du v-model dans vue

Dans vue, "v-model" est utilisé pour lier l'entrée du formulaire aux données du modèle correspondantes, ce qui peut réaliser une liaison bidirectionnelle ; il inclut l'attribut de valeur de liaison "v-bind" et l'élément de formulaire de surveillance "v-on". deux opérations d'événements d'entrée et de modification des données sont "v-model="message"".

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Quelle est l'utilisation du v-model dans vue

v-model peut lier l'entrée du formulaire aux données du modèle correspondantes

Nous implémentons une exigence simple via v-model

Lier le message de données du modèle via l'entrée du formulaire, lorsque le formulaire les données changent, data.message change également

Ensuite, les données du message modifiées sont affichées sur la page d'affichage via l'expression Moustache

v-model est en fait un sucre de syntaxe, qui est une abréviation. Il contient en fait deux opérations :

• .

  Attribut de valeur de liaison v-bind

• v-on écoute l'événement d'entrée de l'élément de formulaire et modifie les données

Utilisation de base du v-model

(1) Utilisation de base

<div id="app">
  <input type="text" v-model="message">
  {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;hello&#39;
    }
  })
</script>

v-model peut obtenir une liaison bidirectionnelle des données. La manière courante est que la page obtienne des données à partir des données. L'utilisation du modèle V peut obtenir une liaison bidirectionnelle, c'est-à-dire que lorsque la page change, les données changent également

(2) Principe de mise en œuvre

<div id="app">
  <input type="text" :value="message" @input="message = $event.target.value">
  <h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;hello&#39;
    },
    methods: {
      valueChange(event) {
        this.message = event.target.value;
      }
    }
  })
</script>

Il s'agit d'une liaison bidirectionnelle implémentée manuellement

[Recommandation associée : "tutoriel vue.js"]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!