Vue-da Hesablanan Xassələr

Digər xassələr əsasında reaktiv şəkildə hesablanan xassələr təyin etmək olar. Belə xassələr hesablanan adlanır. Onlar computed konfiqurasiyasında yerləşir.

Gəlin bir nümunəyə baxaq. Tutaq ki, xassələrdə istifadəçinin adı və soyadı saxlanılır:

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

Gəlin full xassəsi yaradaq, bu xassə soyadlı tam adı ehtiva edəcək:

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

Gəlin şablonumuzda xassələrimizin məzmununu çap edək:

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

Hesablanan xassələr reaktiv şəkildə dəyişir. Bu o deməkdir ki, əgər biz adı və ya soyadı dəyişsək, onda full xassəmiz də avtomatik olaraq reaktiv şəkildə dəyişəcək və biz dəyişiklikləri dərhal ekranda görəcəyik.

Tutaq ki, cost xassəsində məhsulun qiyməti saxlanılır, amount xassəsində isə - onların miqdarı. price hesablanan xassəsi yaradın, hansı ki, məhsulların ümumi dəyərini ehtiva edəcək (qiymət vurulsun miqdarına)

cost xassəsini dəyişəcək bir düymə yaradın. Yoxlayın ki, hesablanan xassə də bu zaman dəyişir.