Реактивно условие във Vue
Нека направим условието реактивно. Например, нека направим така, че елементът да се скрива при натискане на бутон. Нека имаме следния абзац:
<template>
<p v-if="visible">text</p>
</template>
Нека направим така, че нашият абзац първоначално да бъде показан:
data() {
return {
visible: true,
}
}
Сега нека направим бутон, при натискане на който абзацът да се скрива:
<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>
Свързаният метод ще променя
свойството visible на false,
като по този начин кара нашия
абзац да се скрие:
methods: {
hide: function() {
this.visible = false;
}
}
Даден е абзац и бутон. Нека абзацът първоначално е скрит. Направете бутон, който ще показва абзаца.
Дадени са абзац и два бутона. Нека първият бутон показва абзаца, а вторият - го скрива.
Модифицирайте предходната задача така, че на екрана винаги да се вижда само един от бутоните: ако абзацът е показан, то бутон за скриване, а ако е скрит - то бутон за показване.
