Условия, директива v-if

С помощью директивы v-if можно показывать или скрывать элементы. Как эта директива работает:

• Параметром она принимает любое свойство объекта data
• Если свойство имеет значение true, элемент будет показан
• Если свойство имеет значение false, элемент будет скрыт

Пусть у нас есть абзац с атрибутом v-if. Значением этого атрибута пусть служит свойство visible:

App.vue<template>
<p v-if="visible">text</p>
</template>

Давайте установим значение нашего свойства в true. В этом случае абзац будет показан:

App.vuedata()
{
    return {
        visible: true,
    }
}

А вот если visible поставить в значение false, то абзац будет скрыт:

App.vuedata()
{
    return {
        visible: false,
    }
}

Инвертирование условия

Можно инвертировать условие с помощью восклицательного знака:

App.vue<template>
<p v-if="!visible">text</p>
</template>

В таком случае абзац будет показан, если visible имеет значение false и скрыт — если true.

Реактивное условие

Давайте сделаем так, чтобы условие было реактивным. К примеру сделаем так, чтобы элемент прятался по нажатию на кнопку. Пусть у нас есть следующий абзац:

App.vue<template>
<p v-if="visible">text</p>
</template>

Сделаем так, чтобы наш абзац изначально был показан:

App.vuedata()
{
    return {
        visible: true,
    }
}

Сделаем теперь кнопку, по нажатию на которую абзац будет скрываться:

App.vue<template>
<button @click="hide">hide</button>
<p v-if="visible">text</p>
</template>

Привязанный метод будет менять свойство visible на false, тем самым заставляя наш абзац скрыться:

App.vuemethods: {
    hide: function () {
        this.visible = false;
    }
}