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

Пользователь

от landen.nienow , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от cayla , год назад

@landen.nienow 

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


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

1
2
3
4
5
Кликни для отображения компонента


  


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

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



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

Пользователь

от stephania , 5 дней назад

@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.