v-if和v-show的踩坑记录

在html页面中引用了ElementUI组件通过菜单的点击然后显示不同的标签。
起初采用v-if判断点击导航菜单的值来显示不同组件,但是发现当点击的比较频繁的时候会发生组件的错位
正常的布局是这样的:
v-if和v-show的踩坑记录_第1张图片
当点击过于频繁就会出现渲染错位,如下
v-if和v-show的踩坑记录_第2张图片
会发现人员管理的按钮跑到了职位管理。

解决方法是讲v-if换成v-show,因为组件比较多的时候就会出现这种情况。v-if消耗性能小,v-show性能消耗大,但是不会出现上面的那种渲染错误
vue官网关于v-if和v-show的说明
v-if和v-show的踩坑记录_第3张图片
官网文档地址传送

你可能感兴趣的:(#,Vue学习笔记)