Шарти реактивӣ дар Vue
Биёед то чунон кунем, ки шарт реактивӣ бошад. Масалан, то чунон кунем, ки унсур бо пахш кардан ба тугма пинҳон шавад. Бигзор мо параграфи зеринро дошта бошем:
<template>
<p v-if="visible">матн</p>
</template>
Биёед то чунон кунем, ки параграфи мо аз аввал нишон дода шавад:
data() {
return {
visible: true,
}
}
Акнун тугмае созем, ки бо пахш кардан бар он параграф пинҳон мешавад:
<template>
<button @click="hide">пинҳон кардан</button>
<p v-if="visible">матн</p>
</template>
Усули пайвандшуда хосияти
visible-ро ба false иваз мекунад,
ҳамин тавр параграфи моро
вазъ мекунад, то пинҳон шавад:
methods: {
hide: function() {
this.visible = false;
}
}
Параграф ва тугма дода шудааст. Бигзор параграф аз аввал пинҳон бошад. Тугмае созед, ки параграфро нишон диҳад.
Параграф ва ду тугма дода шудааст. Бигзор тугмаи аввал параграфро нишон диҳад, ва тугмаи дуюм - онро пинҳон кунад.
Вазифаи гузаштаро чунон тағир диҳед, ки дар экран ҳамеша танҳо яке аз тугмаҳо намоён бошад: агар параграф нишон дода шуда бошад, пас тугма барои пинҳон кардан, ва агар пинҳон бошад - пас тугма барои нишон додан.
