Тогглинг элементов в Vue

Давайте сделаем кнопку, которая будет тогглить абзац, то есть по первому клику показывать его, а по второму клику — прятать. Для этого по клику на кнопку будем вызывать метод toggle:

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

В коде метода нужно будет брать значение свойства visible и инвертировать его на его противоположность:

App.vuetoggle: function() {
    this.visible = !this.visible;
}

Тернарный оператор

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

App.vue<template>
    <button @click="toggle">
        {{ visible ? 'hide' : 'show' }}
    </button>
</template>