v-show 与 v-if：区别介绍与案例深度分析

前端基地

已于 2024-07-16 16:46:02 修改

阅读量1.3k

点赞数 46

分类专栏： Vue 3.0从入门到精通文章标签： vue.js 前端 javascript html5 css v-show v-if

于 2024-06-18 08:55:11 首次发布

本文链接：https://blog.csdn.net/chinayun_6401/article/details/139760078

版权

Vue 3.0从入门到精通专栏收录该内容

26 篇文章

订阅专栏

v-show、v-if区别

v-if、v-else、v-else-if

v-show、v-if区别

v-show 通常仅会进行一次创建操作，之后主要通过 css 来实现对其显示与隐藏状态的控制。当进行切换按钮等相关操作时，v-show 每次并不会重新去执行 DOM 的删除与创建动作，而仅仅是对元素的 display 属性在显示与 none 之间进行切换，不过其在初始渲染阶段确实存在相对较高的资源消耗情况。

v-if 则有所不同，它会不断地进行元素的创建与销毁流程。在切换按钮等操作发生时，v-if 每次都会重新对元素进行相应的删除或创建操作，这使得它在切换性能方面会产生较高的消耗。具体来说，当 v-if 的条件判断为 true 时，会输出当前标签对应的元素；而当 v-else 的条件判断为 false 时，同样也会输出当前标签所对应的元素。

总体来讲：如果元素涉及到特别频繁的切换情景，那么一般来说最好不要采用 v-if ，而是相对更推荐使用 v-show 。而如果元素存在可能永远都不会被显示出来进而被用户所看到的情况，那么此时较为适宜采用 v-if 。需要注意的是，在实际应用中，应根据具体的场景和需求来合理选择使用 v-show 或 v-if ，以达到最佳的性能和用户体验效果。

示例代码如下：

<!-- 在head中引入element.css、vue.js、element.js -->      
<link rel="stylesheet" href="./css/element-plus.css"/>    
<script src="./js/vue.global.js"></script>    
<script src="./js/element-plus.js"></script>    
<!-- body部分 -->    
<body>  
    <div id="app">  
       <el-row>  
            <el-col :span="24">  
                <el-divider content-position="left">v-show</el-divider>  
                <p v-show="flag1">段落</p>  
                <el-button type="primary" @click="toggle1">单个段落显示隐藏切换</el-button>  
                <p v-show="flag2">段落a</p>  
                <p v-show="!flag2">段落b</p>  
                <el-button type="success" @click="toggle2">多个段落显示隐藏切换</el-button>  
                <el-divider content-position="left">v-if、v-else</el-divider>  
                <p v-if="flag3">段落</p>  
                <el-button type="primary" @click="toggle3">单个段落显示隐藏切换</el-button>  
                <p v-if="flag4">段落a</p>  
                <p v-else>段落b</p>  
                <el-button type="success" @click="toggle4">多个段落显示隐藏切换</el-button>  
            </el-col>           
       </el-row>  
    </div>  
    <script>  
        const app=Vue.createApp({  
            data(){  
                return {  
                    flag1:true,  
                    flag2:true,  
                    flag3:true,  
                    flag4:true  
                }  
            },  
            methods:{  
                toggle1(){  
                    this.flag1=!this.flag1;  
                },  
                toggle2(){  
                    this.flag2=!this.flag2;  
                },  
                toggle3(){  
                    this.flag3=!this.flag3;  
                },  
                toggle4(){  
                    this.flag4=!this.flag4;  
                }  
            }  
        });  
        app.use(ElementPlus);  
        app.mount('#app');  
    </script>  
</body>

运行结果，截图所示：

开启浏览器之后，按下 F12 键，此时便会弹出开发者工具窗口，在 Elements 下面的 p 标签呈现出如下图所示的状态，截图如下：

当逐一点击浏览器页面里的四个按钮之后，浏览器所呈现出的运行效果，如下截图所示：

当打开浏览器之后按下 F12 键，此时便会弹出开发者工具窗口，在 Elements 下面的 p 标签呈现出如下图所示的状态，截图如下：

备注：其中，v-if 会持续地进行创建与销毁，而 v-show 仅仅只创建一次，是通过 css 来对显示和隐藏进行控制。

v-if、v-else、v-else-if

示例代码如下：

<body>  
    <div id="app">  
        <el-row>  
            <el-col :span="24">  
                <el-divider content-position="left">成绩查询</el-divider>  
                <el-button type="success" @click="inputData">查询</el-button>  
                <p v-if="parseInt(type) >= 90">您输入的分数是：{{type}}，成绩：优秀</p>  
                <p v-else-if="parseInt(type) >= 80">您输入的分数是：{{type}}，成绩：良好</p>  
                <p v-else-if="parseInt(type) >= 70">您输入的分数是：{{type}}，成绩：中等</p>  
                <p v-else-if="parseInt(type) >= 60">您输入的分数是：{{type}}，成绩：合格</p>  
                <p v-else-if="type === ''">暂无查询数据</p>  
                <p v-else>您输入的分数是：{{type}}，成绩：不合格</p>  
            </el-col>  
        </el-row>  
    </div>  
    <script>  
        const {createApp}=Vue;  
        const app=createApp({  
            data(){  
                return {  
                    type:''  
                }  
            },  
            methods:{  
                inputData() {  
                    let typeData;  
                    while (true) {  
                        typeData = prompt('请输入您的分数：');  
                        const regex = /^[1-9]\d?$|^100$/;  
                        if (regex.test(typeData)) {  
                            break;  
                        } else {  
                            alert('请输入正确的分数！');  
                        }  
                    }  
                    this.type = typeData;  
                }  
            }  
        })  
        app.use(ElementPlus);  
        app.mount('#app');  
    </script>  
</body>

运行结果：