This article mainly introduces to you the difference between v-if and v-show in vue study notes. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.
v-if vs v-show
v-if is a "real" conditional rendering, as it will ensure that during the switch, the conditional block is The event listeners and subcomponents are destroyed and recreated appropriately.
v-if is also lazy: if the condition is false on initial rendering, nothing is done - rendering of the conditional block won't begin until the condition first becomes true.
In contrast, v-show is much simpler - the element will always be rendered no matter what the initial conditions are, and it is simply toggled based on CSS.
In general, v-if has higher switching overhead, while v-show has higher initial rendering overhead. Therefore, v-show is better if you need to switch very frequently; v-if is better if conditions are unlikely to change at runtime.
<template> <p id="app"> <p v-if="isIf"> if </p> <p v-show="ifShow"> show </p> <button @click="toggleShow">toggle</button> </p> </template> <script> export default { name: 'app', data() { return { isIf : true, ifShow : true, loginType : "username" } }, methods: { toggleShow : function(){ this.ifShow = this.ifShow ? false : true; this.isIf = this.isIf ? false : true; } } } </script>
You can see it more clearly by looking at the chrom console
## From the comparison, we can see that v-if is directly deleted from the code, and v-show only switches the status through display. Therefore, it is recommended to use v-show if you switch frequently. Related recommendations:Detailed explanation of using the v-if directive in elements and templates
Vue.js uses v-show and v -Notes on if
Summary of common Vue.js instructions (v-if, v-for, etc.)
The above is the detailed content of Detailed explanation of the difference between v-if and v-show in vue. For more information, please follow other related articles on the PHP Chinese website!