V-if and V-show in Vue.

1. Difference between the two v-if vs V-show

V-if is a "real" conditional rendering because it ensures that the event listeners and subcomponents within the condition block are properly destroyed and rebuilt during the switchover.

V-if is also inert: if the condition is false at the initial render, nothing is done-until the condition first becomes true, the conditional block is only started.

V-show no matter what the initial conditions are, the elements are always rendered and simply switched based on CSS.

In general, V-IF has higher switching overhead, while V-show has higher initial rendering overhead. Therefore, if you need to switch very frequently, it is better to use v-show, and if the conditions at run time are rarely changed, use v-if better.

2.v-if use

V-if is an instruction, so it must be added to an element.
If you want to switch multiple elements, use the V-IF conditional render grouping on the <template> element
V-if= "Seen" seen is a dynamic Data name or method name or expression

When an element with the same tag name is switched, it needs to be marked with a unique value from the key attribute to allow Vue to differentiate it, otherwise Vue will only replace the content inside the same tag for efficiency.

<transition>
<button v-if= "isediting" key= "Save" >
Save
</button>
<button v-else key= "edit" >
Edit
</button>
</transition>

In some scenarios, you can also override V-if and v-else by setting different states for the key attribute of the same element, as in the above example:

<transition>
<button v-bind:key= "Isediting" >
{{isediting?} ' Save ': ' Edit '}
</button>
</transition>

2.v-show
The difference is that elements with v-show are always rendered and remain in the DOM. V-show simply switches the element's CSS properties to display.

3.v-else-if
Similar to V-else,v-else-if must also be followed by elements with V-if or v-else-if.

4.v-else
The V-else element must be immediately behind an element with v-if or v-else-if, or it will not be recognized.

V-if and V-show in Vue.