Apakah kegunaan model v dalam vue

Dalam vue, "v-model" digunakan untuk mengikat input borang kepada data model yang sepadan, yang boleh mencapai pengikatan dua hala termasuk atribut nilai mengikat "v-bind" dan "v-on"; "Dengar peristiwa input elemen borang dan tukar data. Sintaks ialah "v-model="message"".

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah kegunaan v-model dalam vue

v-model boleh mengikat input borang kepada data model yang sepadan

Kami menggunakan v-model untuk melaksanakan Keperluan mudah

Ikat mesej data model melalui input borang Apabila data borang berubah, data.message juga berubah

Kemudian data mesej yang diubah dipaparkan pada halaman paparan melalui ekspresi Misai

<.>v-model sebenarnya ialah gula sintaks, iaitu singkatan Ia sebenarnya mengandungi dua operasi:

• atribut nilai mengikat v-bind

• v-on mendengar peristiwa input elemen borang dan menukar data

Penggunaan asas model v

(1) Penggunaan asas

<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 boleh mencapai pengikatan dua hala Cara yang biasa ialah halaman memperoleh data daripada data Menggunakan v-model boleh mencapai pengikatan dua hala, iaitu apabila halaman berubah. data juga akan Berubah

(2) Prinsip pelaksanaan

<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>

Ini adalah pengikatan dua hala yang dilaksanakan secara manual

[Cadangan berkaitan: "

vue. tutorial js 》】

Atas ialah kandungan terperinci Apakah kegunaan model v dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!