Vue.js中v-show和v-if使用时的注意事项
来源:互联网 发布:为什么知乎很多反政府 编辑:程序博客网 时间:2024/06/01 07:38
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
0 0
- Vue.js中v-show和v-if使用时的注意事项
- Vue.js 中 v-if 和 v-show 的区别
- Vue.js 中 v-if 和 v-show 的区别
- 对于v-if 和 v-show的选择 --Vue.js
- vue中 v-if 和v-show的问题
- vue 中 v-if 和 v-show 的区别
- vue中v-if和v-show的区别
- v-if和v-show的使用
- vue中v-if和v-show区别
- Vue 中的 v-if 和 v-show
- Vue.js 中 v-if 和 v-show 有什么区别?
- Vue.js 中 v-if 和 v-show 有什么区别?
- Vue.js 中 v-if 和 v-show 有什么区别?
- Vue.js 中 v-if 和 v-show 有什么区别?(转)
- Vue v-if v-show
- 使用vue.js 在移动端简单实现的下拉加载更多 和一些常用的js/jq操作和vueFilter,v-if和v-show运用
- v-if 和 v-show的区别
- vue.js之v-show 与 v-if
- NOIP 2014 螺旋矩阵
- 函数中.call/.bind/.apply三者的区别
- java-mysql基本操作笔记2
- api-title
- new-title
- Vue.js中v-show和v-if使用时的注意事项
- 模型训练之参数选择
- axure 如何让菜单项按钮被选中后变颜色
- 关于Android 6.0权限问题的初步了解
- lightoj 1025 弱智区间dp
- Javascript模块化编程(二):AMD规范
- IP地址定位器
- NOIP 2014 子矩阵
- HTML中引入CSS的方法