Реактивное условие в 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;
}
}
Дан абзац и кнопка. Пусть абзац изначально скрыт. Сделайте кнопку, которая будет показывать абзац.
Дан абзац и две кнопки. Пусть первая кнопка показывает абзац, а вторая - скрывает его.
Модифицируйте предыдущую задачу так, чтобы на экране всегда была видна только одна из кнопок: если абзац показан, то кнопка для сокрытия, а если скрыт - то кнопка для показа.