Vue-da Hisoblanadigan Xususiyatlar

Boshqa xususiyatlar asosida reaktiv ravishda hisoblanadigan xususiyatlarni belgilash mumkin. Bunday xususiyatlar hisoblanadigan deb ataladi. Ular computed sozlamasida joylashgan.

Keling, bir misolni ko'rib chiqaylik. Faraz qilaylik, xususiyatlarda foydalanuvchining ismi va familiyasi saqlansin:

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

Keling, full xususiyatini yarataylik, u to'liq ism va familiyani o'z ichiga oladi:

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

Keling, xususiyatlarimiz mazmunini ko'rinishda chiqaraylik:

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

Hisoblanadigan xususiyatlar reaktiv o'zgaradi. Bu shuni anglatadiki, agar biz ism yoki familiyani o'zgartirsak, full xususiyatimiz avtomatik reaktiv ravishda o'zgaradi va biz darhol ekranda o'zgarishlarni ko'ramiz.

Faraz qilaylik, cost xususiyatida mahsulot narxi saqlanadi, amount xususiyatida esa shu mahsulotlarning soni. Hisoblanadigan price xususiyatini yarating, u mahsulotlarning umumiy qiymatini o'z ichiga oladi (narx soniga ko'paytiriladi)

cost xususiyatini o'zgartiradigan tugma yarating. Hisoblanadigan xususiyat shu paytda ham o'zgarishini tekshiring.