Close read Vue official documentation series 🎉

v-if / v-else-if / v-else

Vue conditional judgment instruction.

Conditional grouping judgment

Add the vue conditional directive to the

Use keys to manage reusable elements

Vue’s diff algorithm recalculates and renders if the key is different, so if you want to reuse a component or element heavily, you can keep the key unique and fixed.

V – show and v – the if

The elements bound by the V-show command will still be rendered, but in a hidden state (display: None), whereas the v-if command will render the elements only if the condition is true.

Note that v-show does not support the

In general, V-if has a higher switching overhead, while V-show has a higher initial rendering overhead. Therefore, v-show is good if you need to switch very frequently; It is better to use V-if if conditions rarely change at run time.

In pure javascript-driven versions, too much page hierarchy can cause elements to flicker during the initial v-show rendering, The best solution is to use the V-cloak directive in combination with the [V-cloak]{display: None} style inline in HTML beforehand.

V – if with v – for

The V-IF instruction and the V-for instruction cannot be used on the same element at the same time, and the V-for instruction has higher priority than the V-IF instruction.