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 বৈশিষ্ট্য পরিবর্তন হবে। যাচাই করুন যে গণনাকৃত বৈশিষ্ট্যও এক্ষেত্রে পরিবর্তিত হবে।