The same thing ：v-if And v-show Can be dynamically controlled dom Elements show and hide
Difference ：v-if To show and hide is to put dom Add or delete elements as a whole , and v-show Hiding is to add css–display:none,dom The elements are still there .
Are modified to false after , first div It was removed directly
It should be noted that , When an element defaults to css Medium plus display：none attribute , At this time through v-show It is amended as follows true You can't make elements display . The reason is the show hide switch , It just changes element style by display:"" perhaps display:none, and Does not override or modify existing css attribute .
More detailed differences are quoted here Young Dreamer The blog content of
1. methods ：v-if It's dynamic DOM Add or remove... From the tree DOM Elements ;v-show By setting DOM Elemental display The style attribute controls the display and concealment ;
2. The build process ：v-if The switch has a partial compilation / Uninstallation process , Properly destroy and rebuild the internal event monitor and sub components during the handover process ;v-show It's simply based on css Switch ;
3. Compile conditions ：v-if It's inert. , If the initial condition is false , And do nothing ; Local compilation starts only when the condition first becomes true （ The compilation is cached ？ After the compilation is cached , And then, when switching, local unloading is performed ); v-show Under any conditions （ Is the first condition true ） All compiled , Then it's cached , and DOM Element retention ;
4. Performance consumption ：v-if Higher switching consumption ;v-show There is a higher initial render cost ;
5. Use scenarios ：v-if Suitable operating conditions are unlikely to change ;v-show Suitable for frequent switching .