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
element. Implement a judgment on a group of elements.
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
element.
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.