search

vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

Can you explain the difference between v-if & v-show? #122

Closed jcoffland closed 9 years ago

jcoffland commented 9 years ago

Also, I'm interested in knowing if either of these can be used to lazy load a group of child elements. I.e. they are only compiled when the statement is true and are destroyed when it's false.

RangerMauve commented 9 years ago

What you're describing is how v-if works. It conditionally renders that part of the tree. v-show just toggles display:none.

jcoffland commented 9 years ago

@RangerMauve, thanks!

As, a side note, v-if was not enough for my situation. The problem I had was that the component (CodeMirror, not a vue.js component in this case) being rendered was still being rendered while hidden causing the component to render incorrectly. The solution was to use Vue.nextTick() in compiled() (or in bind() for a directive) to call CodeMirror.refresh() in addition to using v-if.

xgqfrms-GitHub commented 7 years ago

https://vuejs.org/v2/guide/conditional.html