zoukankan      html  css  js  c++  java
  • v-show 与 v-if区别

    关于条件渲染

    所谓条件渲染,就是根据不同的条件,使用不同的模板来生成 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 比较适合不太频繁的切换状态的组件。所以项目设计的时候,不要对复杂的业务设计模块太频繁的视图切换。尽量将静态内容和动态内容分离到不同的模块中。

    一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。

    嗯,就酱~~

    参考链接:https://www.cnblogs.com/hjbky/p/6940991.html

  • 相关阅读:
    实现移动端上拉加载效果
    前端日常常用git命令
    css中单位em和rem的区别
    Sass框架的应用
    flex(弹性盒模型)布局写一个移动端
    windows和mac下分别配置虚拟主机
    把简单的二维数组变成一维数组
    go异常处理
    nginx中在超全局变量$_SERVER中增加变量
    阿里云接口异常-Can not find endpoint to access
  • 原文地址:https://www.cnblogs.com/jin-zhe/p/10313162.html
Copyright © 2011-2022 走看看