VUE指令及用法大全——（六、七）v-if、v-show 显示与隐藏的实现区别和原理

最新推荐文章于 2024-05-31 11:03:20 发布

原创最新推荐文章于 2024-05-31 11:03:20 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#v-if与v-show的区别 #v-if与v-show的应用场景 #v-if与v-show实现原理

Vue 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了Vue中v-if与v-show的区别、原理及应用场景。二者都用于切换元素显示或隐藏，v-if通过创建或移除元素实现，切换消耗高；v-show通过切换display样式实现，初始渲染消耗高。频繁切换用v-show，运行条件少变用v-if。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法：v-if: / v-show:

作用以及实现原理：

1.v-if 和 v-show 的作用都是切换界面上元素的显示或隐藏的
2. v-if 的实现原理：通过动态创建或移除元素实现元素的显示与隐藏
3. v-show 的实现原理：通过动态切换元素的display样式，来控制元素的显示与隐藏

注意： v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗-==。

使用场景： 如果需要频繁的切换 v-show 比较好，如果在运行条件不大可能改变用 v-if 比较好。

v-if 演示效果：

在这里插入图片描述

v-show 演示效果：

在这里插入图片描述

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>23-v-if-v-show使用方法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-if动态切换dom元素 -->
        <!-- <p v-if="flag == 0 ">小美子啦啦啦···</p> -->
        
        <!-- v-show切换元素css样式‘display’ -->
        <p v-show="flag == 0 ">小美子啦啦啦···</p>
        <button class="toUpload" type="primary">请按F12查看</button>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: 1
            },
            methods: {

            }
        })
    </script>
</body>
</html>