Vue-ի ռեակտիվությունը

Ցանկացած փոփոխություն data-ից հանգեցնում է էջի վրա այդ տվյալների ցուցադրման ակնթարթային փոփոխության։ Vue-ի այս պահվածքը կոչվում է ռեակտիվություն։

Եկեք ստուգենք գործնականում։ Ենթադրենք ունենք հետևյալ հատկությունը․

data() {
	return {
		text: 'xxx',
	}
}

Ցուցադրենք այս հատկության արժեքը․

<template>
	{{ text }}
</template>

Ստեղծենք մի կոճակ, որի սեղմումով կփոխվի մեր հատկությունը․

<template>
	{{ text }}
	<button @click="change">text</button>
</template>

Այժմ գրենք մեթոդ, որը կկանչվի կոճակի սեղմման ժամանակ և կփոխի հատկությունը․

methods: {
	change: function() {
		this.text = 'yyy';
	}
}

Եթե հավաքել բոլոր կոդը միասին և սեղմել կոճակի վրա - էկրան上的 տեքստը ռեակտիվ կփոխվի այլ տեքստի։

Տրված է text հատկությունը։ Ցուցադրեք այս հատկության պարունակությունը ինչ-որ պարբերության մեջ։

Տրված է կոճակ։ Ապահովեք, որ այս կոճակի վրա սեղմելիս text հատկության արժեքը ռեակտիվ փոխվի այլ արժեքի։

Տրված են երկու կոճակ։ Ապահովեք, որ առաջին կոճակի վրա սեղմելիս text հատկության արժեքը ռեակտիվ փոխվի մի արժեքի, իսկ երկրորդի վրա սեղմելիս՝ այլ արժեքի։