Изчисляеми свойства във Vue

Можете да задавате свойства, които ще се изчисляват реактивно на базата на други свойства. Такива свойства се наричат изчисляеми. Те се разполагат в настройката computed.

Нека разгледаме пример. Нека в свойствата се съхранява име и фамилия на потребител:

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

Нека направим свойство full, което ще съдържа пълното име с фамилия:

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

Нека изведем в представлението съдържанието на нашите свойства:

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

Изчисляемите свойства се променят реактивно. Това означава, че ако променим името или фамилията, тогава и нашето свойство full автоматично ще се промени реактивно и веднага ще видим промените на екрана.

Нека в свойство cost се съхранява цената на продукт, а в свойство amount - количеството от тези продукти. Направете изчисляемо свойство price, което ще съдържа общата стойност на продуктите (цена умножена по количество)

Направете бутон, клик върху който ще променя свойството cost. Проверете, че изчисляемото свойство също ще се променя при това.