vuejs

A Flavor of Directives. 18
v-else in action
Just for the sake of the example we have used an h2 tag with a different warning than before which
is displayed conditionally. If there is no message present, we see the h1 tag. If there is a message, we
see the h2 using this very simple syntax of Vue v-if and v-else. As you can see above we’ve used
v-if as well as v-show. Both give us the same result. Simple as a pimple!
3.4 v-if vs. v-show
Even though we have already mentioned a difference between v-if and v-show , we can deepen a bit
more. Some questions may arise out of their use. Is there a big difference between using v-show and
v-if? Is there a situation where performance is affected? Are there problems where you’re better
off using one or the other? You might experience that the use of v-show on a lot of situations causes
bigger time of load during page rendering. In comparison, v-if is truly conditional according to the
guide of Vue.js.
When using v-if, if the condition is false on initial render, it will not do anything
- partial compilation won’t start until the condition becomes true for the first time.
Generally speaking, v-if has higher toggle costs while v-show has higher initial render
costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the
condition\ is unlikely to change at runtime.
So, when to use which really depends on your needs.