Vue.js使用v-show和v-if的注意事项

关于两者的区别，官网这样说道：

切换v-if块时，Vue.js有一个本地编译/卸载过程，因为v-if中的模板也可能包含数据绑定或子组件。V-if是一个真正的条件呈现，因为它确保了条件块中的事件侦听器和子组件在切换过程中被正确销毁和重建。

V-if也是惰性的：如果初始渲染时条件为假，则什么也不做。——只有当条件第一次变为真时，才会开始本地编译(编译将被缓存)。

相比之下，v-show要简单得多。——元素总是被编译和保留，但只是基于CSS进行切换。

一般来说，v-if的切换消耗较高，v-show的初始渲染消耗较高。因此，最好经常切换v-show，如果运行时条件不太可能改变，最好改变v-if。

让我们通过例子来看看使用v-show和v-if时的注意事项

1.通过Vue.js中的v-if指令判断Vue中的某个对象是否为空(此对象与后台传来的json数据绑定)，从而判断是否显示分页栏。在实际过程中发现，在第一次请求并渲染背景数据后，并没有显示分页栏，但是在重新渲染背景数据后，分页栏可以正常显示。

问题如图所示：

2.理由

查看没有渲染dom结构的页面，发现上面分页栏所在的div没有出现在页面中。这是因为当vue组件初始化时，id为的div示例被删除，因为列表是空的，所以后续的分页操作是针对空dom对象的。第一次渲染后，列表不是空的，div被添加到节点中，因此后续的分页栏可以正常显示。

3.解决

v-if指令被v-show指令取代。如果条件为真，v-if会删除其dom和子dom，而v-show会添加“display:none”来隐藏它。修改代码，效果如下

使用经验：

关于如何选择V-show和V-if，我有以下建议：

1.V-if可用于呈现管理系统的权限列表。如果使用V-show，用户没有的权限仍然可以在网页的源代码中显示。如果使用V-if，则权限不会显示在网页的源代码中。(在前景和背景分离的情况下，背景不负责渲染页面的场景。) 2.前台页面数据显示推荐使用V-show，可以减少开发中不必要的麻烦。

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。