v-if 和 v-show 的区别

最新推荐文章于 2024-04-14 10:00:00 发布

IT_全世界的屋顶

最新推荐文章于 2024-04-14 10:00:00 发布

阅读量513

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_50313248/article/details/117229574

版权

v-if 和 v-show 的区别

v-if 和 v-show 的共同点：都可以让元素显示和隐藏

v-if 和 v-show 的不同点：

v-if 在编译过程中会被转化成三元表达式,条件不满足时不渲染此节点。

v-show 会被编译成指令，条件不满足时控制样式将对应节点隐藏（display:none）

<body>
    <div id="app">
        <p v-if="flag">我是v-if</p>
        <p v-show="flag">我是v-show</p>
        <button @click="flag = !flag">切换</button>
    </div>

    <script>
        var VM = new Vue({
            el:'#app',
            data:{
                flag:true
            }
        })
    </script>
</body>

使用场景

v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景

v-show 适用于需要非常频繁切换条件的场景

扩展补充：display:none，visibility:hidden 和 opacity:0 之间的区别？

总结
1.它们两个都是根据表达式的真假判断元素显示与隐藏
2.v-if只有在条件为真时，才对元素进行渲染，v-show无论初始条件为何，元素总会被渲染。
3.v-show初始开销更高，v-if的切换开销更高
4.频繁切换时用v-show；运行条件很少改变时用v-if

IT_全世界的屋顶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
v-if 和 v-show 的区别

v-if 和 v-show 的区别v-if 和 v-show 的共同点：都可以让元素显示和隐藏v-if 和 v-show 的不同点：v-if 在编译过程中会被转化成三元表达式,条件不满足时不渲染此节点。v-show 会被编译成指令，条件不满足时控制样式将对应节点隐藏（display:none）<body> <div id="app"> <p v-if="flag">我是v-if</p> <p v-sho
复制链接

扫一扫