vue js скрыть Input при клике на кнопку

110

10 декабря 2019, 08:20

Как можно скрыть input при клике на кнопку? Скрыть, не используя стили (навроде document.getElem....id('test').style.display = "none" (или visible ='hidden'))

Answer 1

<div>
  <input v-if="inputVisibility" type="text">
  <button @click="hideInput">Hide input</button>
</div>
data() {
  return {
    inputVisibility: true
  }
},
methods: {
  hideInput() {
    this.inputVisibility = false;
    // или можно тоггл
    // this.inputVisibility = !this.inputVisibility;
  }
}

Еще есть директива v-show. Отличие в том, что v-if не рендерит, если условие false, a v-show рендерит, но в css пишет display: none. Подробнее тут https://ru.vuejs.org/v2/guide/conditional.html