Как скрыть элемент по id используя vue.js?

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

от krista , в категории: JavaScript , 8 месяцев назад

Как скрыть элемент по id используя vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от dorothea_stoltenberg , 8 месяцев назад

@krista 

Чтобы скрыть элемент по его id используя Vue.js, вы можете воспользоваться директивой v-show или v-if.

  1. Использование директивы v-show:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
  Элемент, который будет скрыт или показан
  Скрыть/Показать



new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});


В этом примере элемент с id app содержит элемент, который будет скрыт или показан в зависимости от значения переменной isVisible. При нажатии на кнопку "Скрыть/Показать", значение переменной isVisible меняется, что приводит к изменению видимости элемента.

  1. Использование директивы v-if:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
  Элемент, который будет скрыт или показан
  Скрыть/Показать



new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
});


В этом примере элемент с id app содержит элемент, который будет добавлен или удален из DOM в зависимости от значения переменной isVisible. При нажатии на кнопку "Скрыть/Показать", значение переменной isVisible меняется, что приводит к добавлению или удалению элемента из DOM.