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

1、通过Vue.js中v-if指令来判断Vue中某个对象是否为空（该对象与后台传来的json数据绑定），从而判断是否显示分页条，在实际过程中发现，第一次请求后台数据，进行渲染过程后，分页条没有显示，但之后的请求后台数据再渲染，分页条都可正常显示。问题如图所示：



2、原因

查看页面未渲染dom结构，发现上述分页条所在的div，没有出现页面中，这是由于vue组件初始化时，由于list为空导致id为example的div删除了，所以后续分页操作，针对是空dom对象，在第一次渲染结束后，由于list不为空，该div又加到该节点上，所以而后的分页条都可正常显示。



3、解决

将v-if指令替换为v-show指令，在条件为真的情况下，v-if将其所在dom及其子dom都删除，而v-show是将该dom加上了“display：none”，使其隐藏了起来。修改代码及效果如下





使用心得：

对于V-show，V-if如何选择，本人有以下建议：

1、对于管理系统的权限列表的展示，这里可以使用V-if来渲染，如果使用到V-show，对于用户没有的权限，在网页的源码中，仍然能够显示出该权限，如果用V-if，网页的源码中就不会显示出该权限。（在前后台分离情况下，后台不负责渲染页面的场景。）

2、对于前台页面的数据展示，这里推荐使用V-show，这样可以减少开发中不必要的麻烦。

参考资料：

Vue.js官网---http://v1.vuejs.org/api/#v-show