Bagaimana untuk menetapkan atribut pengiraan dalam vue

Dalam Vue, pengiraan ialah ciri yang sangat berkuasa, yang membolehkan kami memperoleh beberapa nilai atribut baharu​​​dengan mengira sifat. Dalam kebanyakan kes, sifat yang dikira digunakan untuk mengira beberapa nilai dan bukannya mengubah suai nilai. Walau bagaimanapun, dalam beberapa kes khas, kita mungkin perlu menetapkan harta yang dikira kepada nilai baharu. Jadi, dalam Vue, bagaimanakah sifat yang dikira boleh ditetapkan? Seterusnya, artikel ini akan menjawabnya satu persatu untuk anda.

1. Penggunaan asas atribut terkira

Mari kita lihat penggunaan asas atribut terkira. Atribut yang dikira sebenarnya adalah atribut dengan kaedah get dan set. Antaranya, kaedah get digunakan untuk mengira nilai atribut, dan kaedah set digunakan untuk menetapkan nilai atribut. Berikut ialah contoh:

computed: {
  fullName: {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    },
    set: function(newValue) {
      var names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

Dalam kod di atas, kami mentakrifkan nama penuh sifat terkira yang nilainya ialah gabungan nama pertama dan Nama akhir. Dalam kaedah get, kami mengira nilai fullName dengan menggabungkan firstName dan lastName. Dalam kaedah yang ditetapkan, kami mengubah suai nilai atribut asal dengan memisahkan nilai nama penuh baharu kepada nama pertama dan Nama akhir dan kemudian menetapkan nilainya pada masa yang sama.

2. Nota tentang kaedah set atribut yang dikira

Walaupun kaedah set atribut yang dikira kelihatan berguna, ia juga mempunyai beberapa perkara yang perlu diberi perhatian. Perkara yang lebih penting ialah yang berikut:

1. Memandangkan atribut yang dikira pada asasnya adalah baca sahaja, apabila menetapkan atribut, anda perlu memastikan bahawa nilai yang ditetapkan tidak akan menjejaskan tempat lain.
2. Memandangkan atribut yang dikira itu sendiri tidak menyimpan nilai, apabila menetapkan atribut anda perlu memastikan bahawa nilai yang ditetapkan adalah betul pada kali berikutnya anda mendapatkannya.

3. Contoh aplikasi praktikal

Di bawah kami menggunakan contoh aplikasi praktikal untuk menunjukkan cara menetapkan atribut yang dikira.

Pertama, kami mentakrifkan komponen dengan atribut totalPrice yang dikira, yang nilainya ialah harga produk didarab dengan kuantiti produk, iaitu jumlahHarga = harga * kuantiti. Kami boleh menggunakan kod berikut untuk melaksanakan harta terkira ini:

<template>
  <div>
    <p>单价：{{ price }}</p>
    <p>数量：<input v-model="quantity"></p>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        quantity: 2
      }
    },
    computed: {
      totalPrice: {
        get() {
          return this.price * this.quantity
        },
        set(newValue) {
          this.quantity = newValue / this.price
        }
      }
    }
  }
</script>

Dalam kod di atas, kami mula-mula mentakrifkan komponen yang mengandungi jumlahHarga harta terkira. Dalam kaedah dapatkan, kami menggunakan harga dan kuantiti untuk mengira jumlah nilai dalam kaedah yang ditetapkan, kami menggunakan newValue dan harga untuk mengira nilai kuantiti baharu, dan kemudian mengemas kini data untuk mengemas kini DOM.

Sekarang, jika kita ingin menetapkan jumlah harga, bukannya kuantiti atau harga, kita boleh melakukan ini:

this.totalPrice = 20;

Ini akan mengubah suai nilai kuantiti secara automatik supaya jumlah harga sama dengan 20. Jika kita mahukan harga unit didarabkan dengan kuantiti untuk menyamai jumlah harga, dan bukannya memperuntukkan kuantiti secara automatik apabila jumlah harga ditetapkan, kita boleh mengubah suai logik dalam kaedah yang ditetapkan seperti berikut:

set(newValue) {
  this.price = newValue / this.quantity
}

Dengan cara ini, kami Anda boleh mengubah suai nilai harga unit dengan menetapkan jumlah harga.

Secara umum, atribut yang dikira sememangnya merupakan ciri yang sangat berkuasa, tetapi terdapat banyak perkara yang perlu diberi perhatian. Dalam penggunaan sebenar, kita perlu menggunakan kaedah set atribut yang dikira dengan teliti mengikut situasi untuk mengelakkan masalah yang tidak perlu.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan atribut pengiraan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!