Vue: v-hide tag

[overallduka]

VueJs dont have an v-hide tag just v-show so everything that appear/desappear on screen i need to put display: none in css properties, coming from angular i miss this tag and would like to have this on vuejs.

[sqal]

I personally don't see the points of having this directive when you can simply use negation operator !

v-show="!isVisible"

but if you can't live without you can create v-hide directive by yourself

Vue < 2.0

{
  update: function (isHidden) {
    this.el.style.display = isHidden ? 'none' : '';
  }
}

Vue 2.0

function toggleDisplay(el, isHidden) {
  el.style.display = isHidden ? 'none' : '';
}

{
  bind: function(el, binding) {
   toggleDisplay(el, binding.value)
  },
  update: function(el, binding) {
   toggleDisplay(el, binding.value)
  }
}

But by doing so you won't be able to use transition system.

[posva]

This has already been discussed. To sum it up, v-hide="var" is pure syntax sugar against v-show="!var". That's only 1 more character and it's definitely not worth adding to the Core of Vue because we prefer having only one way of doing it