Чтобы показать элемент при клике в Vue.js, вы можете использовать директиву v-show. Директива v-show позволяет скрывать или показывать элемент в зависимости от значения выражения.
Вот пример, который показывает, как показать элемент при клике:
<template>
<div>
<button @click="showElement = !showElement">Показать элемент</button>
<p v-show="showElement">Этот элемент будет показан при клике</p>
</div>
</template>
<script>
export default {
data() {
return {
showElement: false, // начальное значение - элемент скрыт
};
},
};
</script>
В этом примере мы создаем кнопку с помощью элемента button и вызываем метод toggleElement, когда происходит клик на кнопке. Метод toggleElement меняет значение переменной showElement на противоположное, что в свою очередь вызывает изменение отображения элемента с помощью директивы v-show. Если showElement имеет значение true, элемент будет показан, а если showElement имеет значение false, элемент будет скрыт.
Таким образом, при каждом клике на кнопку элемент будет скрываться или показываться в зависимости от его текущего состояния.
Кроме директивы v-show, также можно использовать директиву v-if. В отличие от v-show, которая просто скрывает или показывает элемент с помощью CSS display, директива v-if фактически добавляет или удаляет элемент из DOM, основываясь на результате выражения.