美文网首页Vue
vue中v-if和v-show的用法区别

vue中v-if和v-show的用法区别

作者: 腹黑De狼 | 来源:发表于2018-11-22 16:02 被阅读0次

    共同点:
    v-if和v-show都是通过判断绑定数据的true\false来展示的

    不同点:
    v-if只有在判断为true的时候才会对数据进行渲染,false的时候把包含的代码进行删除。除非再次进行数据渲染,v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。
    v-show是无论判断是什么都会先对数据进行渲染,只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下,改变数据的值可以使数据展示或隐藏。

    用法推荐:
    v-if更适合于带有权限的操作,渲染时判断权限数据,有则展示该功能,没有则删除。
    v-show更适合于日常使用,可以减少数据的渲染,减少不必要的操作。
    综上,v-if 有更高的切换消耗,而 v-show 有更高的初始渲染消耗。
    因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变,更倾向功能权限性的话 v-if 较好。

    相关文章

      网友评论

        本文标题:vue中v-if和v-show的用法区别

        本文链接:https://www.haomeiwen.com/subject/aublqqtx.html