Sifat Terkira dalam Vue

Anda boleh menetapkan sifat yang akan dikira secara reaktif berdasarkan sifat lain. Sifat sedemikian dipanggil sifat terkira. Mereka terletak dalam tetapan computed.

Mari kita lihat contoh. Katakan dalam sifat disimpan nama pertama dan nama keluarga pengguna:

data() {
	return {
		name: 'john',
		surn: 'smit',
	}
}

Mari buat sifat full, yang akan mengandungi nama penuh dengan nama keluarga:

computed: {
	full: function() {
		return this.name + ' ' + this.surn;
	}
}

Mari paparkan kandungan sifat kita dalam persembahan:

<template>
	<p>{{ name }}</p>
	<p>{{ surn }}</p>
	<p>{{ full }}</p>
</template>

Sifat terkira berubah secara reaktif. Ini bermakna jika kita menukar nama pertama atau nama keluarga, maka sifat full kita akan berubah secara reaktif secara automatik dan kita akan segera melihat perubahan pada skrin.

Katakan dalam sifat cost disimpan harga produk, dan dalam sifat amount - kuantiti produk ini. Buat sifat terkira price, yang akan mengandungi jumlah harga produk (harga didarab dengan kuantiti)

Buat butang, klik padanya akan mengubah sifat cost. Pastikan bahawa sifat terkira juga akan berubah semasa itu.