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

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

от lori_jast , в категории: JavaScript , 2 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от willis.streich , 2 года назад

@lori_jast 

Вы можете скрыть элемент по id в Vue.js, используя динамическое привязывание стилей с помощью свойства v-bind. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div>
    <div id="element-to-hide" v-bind:style="{ display: displayStyle }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayStyle: 'block'
    };
  },
  methods: {
    hideElement() {
      this.displayStyle = 'none';
    }
  }
};
</script>


В этом примере, свойство displayStyle в объекте data отвечает за стиль отображения элемента с id element-to-hide. При вызове метода hideElement, мы изменяем значение displayStyle на 'none', что скрывает элемент.

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

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

@lori_jast 

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


В этом примере, свойство isHidden в объекте data отвечает за отображение элемента с id element-to-hide. При вызове метода hideElement, значение isHidden устанавливается на true, что скрывает элемент.