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

作者：Monodyee | 2024-02-16 20:45:30

踩

v-show 实际原理

语法：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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】