Показ по условию в Vue
Следующая директива, которую мы изучим, называется
v-if. С ее помощью можно показывать
или скрывать элементы. Как эта директива
работает: параметром она принимает любое
свойство объекта data. Если это свойство
имеет значение true - то элемент будет
показан, а если false - то скрыт.
Давайте посмотрим на примере.
Пусть у нас есть абзац с атрибутом v-if.
Значением этого атрибута пусть служит свойство
visible, вот так:
<template>
<p v-if="visible">text</p>
</template>
Давайте установим значение нашего свойства
в true. В этом случае
абзац будет показан:
data() {
return {
visible: true,
}
}
А вот если visible поставить в значение
false, то абзац будет скрыт:
data() {
return {
visible: false,
}
}
Пусть в data хранится свойство visible.
Пусть у вас также есть два абзаца. Сделайте
так, чтобы первый абзац был показан на экране,
если свойство visible равно true,
а второй абзац, наоборот, показан, если свойство
visible равно false.