Index | v-show directive | v-if directive |
---|---|---|
1. | The v-if directive is used to render the element to the DOM only if the expression passes. | The v-show directive is used to render all elements to the DOM and then uses the CSS display property to show/hide elements according to the expression. |
2. | The v-if directive also supports v-else and v-else-if directives. | The v-show directive doesn’t support the v-else and v-else-if directives. |
3. | The v-if directive has higher toggle costs since it adds or removes the DOM every time. | The v-show directive has higher initial render costs. |
4. | The v-if directive has the advantage when it comes to initial render time. | The v-show directive has a performance advantage if you have to switch on and switch off the elements frequently. |
5. | The v-if directive supports the tab. | The v-show directive doesn’t support the tab. |