Вылічальныя ўласцівасці ў 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. Праверце, што вылічальнае ўласцівасць таксама будзе змяняцца пры гэтым.