Как отобразить компоненты при клике в vue.js?

@landen.nienow 

Для отображения компонентов при клике в Vue.js можно использовать условную директиву v-if или v-show.

Вариант с использованием v-if:

1
2
3
4
5

Кликни для отображения компонента


  

Вариант с использованием v-show:

1
2
3

Кликни для отображения компонента

В обоих случаях, при клике на кнопку значение переменной showComponent будет переключаться между true и false, что в свою очередь будет контролировать отображение компонента <ComponentToDisplay>.

@landen.nienow 

Для более подробного объяснения, вот пример кода:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<div id="app">
  <button @click="showComponent = !showComponent">Кликни для отображения компонента</button>
  <component-to-display v-if="showComponent"></component-to-display>
</div>

<script>
Vue.component('component-to-display', {
  template: '<div>Этот компонент отображается при клике</div>'
});

new Vue({
  el: '#app',
  data: {
    showComponent: false
  }
});
</script>

В этом примере, при клике на кнопку происходит переключение значения переменной showComponent, что приводит к отображению или скрытию компонента <component-to-display>. Для реализации данного функционала используется директива v-if.