Gabungan arahan model v dan fungsi harta terkira dalam dokumen Vue

Vue.js ialah rangka kerja JavaScript yang moden dan fleksibel untuk membina aplikasi web interaktif pengguna. Artikel ini akan memperkenalkan penggunaan gabungan arahan model v dan fungsi harta terkira dalam dokumen Vue.

Arahan v-model ialah arahan terbina dalam dalam Vue yang digunakan untuk mencipta pengikatan data dua hala pada elemen borang. Ia menjadikannya sangat mudah untuk menyegerakkan data ke dalam model data Vue apabila pengguna memasukkan data. Contohnya, model v boleh diikat pada atribut data komponen Vue seperti berikut:

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

Dalam contoh di atas, apabila pengguna menaip teks dalam kotak input, Vue akan mengemas kini nilai mesej secara automatik, jadi pengikatan data yang sepadan memaparkan teks yang dimasukkan oleh pengguna.

Walau bagaimanapun, dalam beberapa kes, beberapa sifat khusus perlu dikira berdasarkan data yang dimasukkan oleh pengguna dan dikemas kini ke dalam model data Vue. Ini boleh dicapai menggunakan fungsi harta yang dikira. Fungsi harta terkira ialah sifat Vue khas yang mengira dan memperoleh sifat baharu berdasarkan keadaan tika Vue. Fungsi harta yang dikira secara automatik mengemas kini apabila sifat yang bergantung padanya berubah, jadi ia boleh digunakan untuk mengendalikan logik dalam komponen.

Apabila menggunakan fungsi sifat terkira bersama dengan arahan model v, anda boleh menukar data input pengguna kepada sifat terkira dan mengemas kininya kepada model data Vue dengan menetapkan atribut penetap dalam fungsi sifat terkira. tengah. Sebagai contoh, anda boleh mencipta fungsi sifat terkira seperti ini:

<template>
  <div>
    <input v-model="fullName" />
    <p>First Name: {{ firstName }}</p>
    <p>Last Name: {{ lastName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullName: ''
    }
  },
  computed: {
    firstName: {
      get() {
        return this.fullName.split(' ')[0]
      },
      set(value) {
        this.fullName = value + ' ' + this.lastName
      }
    },
    lastName: {
      get() {
        return this.fullName.split(' ')[1]
      },
      set(value) {
        this.fullName = this.firstName + ' ' + value
      }
    }
  }
}
</script>

Dalam contoh di atas, arahan model v terikat pada sifat nama penuh dan dua fungsi sifat terkira yang lain mengira sifat pertama dan perkataan kedua (melalui kaedah split rentetan). Selain itu, kedua-dua sifat yang dikira mempunyai sifat penetap yang ditetapkan supaya sifat Nama penuh dikemas kini apabila pengguna mengubah suai nilainya. Apabila pengguna memasukkan teks dalam kotak input, Vue mengemas kini sifat nama penuh secara automatik dan oleh kerana fungsi sifat terkira bergantung padanya, sifat nama pertama dan nama akhir dikemas kini secara automatik.

Dengan cara ini, terbitan dan pengemaskinian sifat berdasarkan input pengguna boleh dicapai dengan mudah menggunakan arahan model-v dan fungsi harta yang dikira. Teknik ini berguna sama ada anda mempunyai borang ringkas yang mengandungi medan input teks dan kotak semak atau borang dinamik yang mengandungi berbilang elemen input. Walau bagaimanapun, kita perlu sedar bahawa menggunakan terlalu banyak fungsi harta yang dikira boleh menjejaskan prestasi aplikasi. Oleh itu, apabila menggunakan teknik ini, anda perlu sedar tentang kerumitan model data, serta bilangan dan kerumitan fungsi atribut yang dikira.

Ringkasnya, arahan model v dan fungsi sifat terkira dalam dokumentasi Vue ialah dua fungsi yang sangat berguna. Mereka membantu kami melaksanakan borang dan komponen interaktif dengan lebih mudah, di samping menjadikan kod lebih elegan dan boleh dibaca.

Atas ialah kandungan terperinci Gabungan arahan model v dan fungsi harta terkira dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!