Vue使用v-if和v-show的坑
2018-06-18 20:31
190 查看
就在刚刚我使用layDate,我使用的v-if判断绑定的,怎么也不对,后来才发现v-if和v-show的锅,一直以为二者一样呢。
关于条件渲染
所谓条件渲染,就是根据不同的条件,使用不同的模板来生成 html。 在 Vue.js 中,使用 v-if 和 v-show 指令来控制条件渲染。
区别
v-show 会在app初始化的时候编译并且渲染,并且在之后一直存在。当切换v-show模块时,只是简单的更改css。
v-if 当切换v-if模块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。 v-if 是惰性的,如果为false,则什么也不错-不编译,不渲染。 当第一次条件为真时,才开始编译。
建议
v-show的切换消耗比较低,但是不会重新渲染子组件,所以最好用于静态的内容或者不需要重新构建结构的组件。而 v-if 比较适合不太频繁的切换状态的组件。所以项目设计的时候,不要对复杂的业务设计模块太频繁的视图切换。尽量将静态内容和动态内容分离到不同的模块中。
相关文章推荐
- Vue.js使用v-show和v-if的注意事项
- Vue的v-if以及v-show的使用过程中遇到的问题
- Vue.js中v-show和v-if使用时的注意事项
- v-if和v-show的使用
- VUE中的v-if与v-show
- Vue.js学习记录之在元素与template中使用v-if指令实例
- vue.js之v-show 与 v-if
- vue学习笔记之v-if和v-show的区别
- vue中v-if和v-show区别
- Vue.js 中 v-if 和 v-show 有什么区别?
- VUE中的v-if与v-show
- VUE中的v-if与v-show
- Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
- VUE中的v-if与v-show
- Vue.js 中v-for和v-if一起使用,来判断select中的option为选中项
- ng-show和ng-if的区别和使用场景
- Vue 中的 v-if 和 v-show
- vue学习笔记二:v-if和v-show的区别
- VUE中的v-if与v-show