Vue中 v-show 和 v-if 的区别

最新推荐文章于 2023-02-24 16:21:26 发布

忆弥

最新推荐文章于 2023-02-24 16:21:26 发布

阅读量1.4k

点赞数 1

分类专栏： Vue 文章标签： vue html vue.js 前端

本文链接：https://blog.csdn.net/qq_43692768/article/details/109449001

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

v-show

作用：根据真假切换元素的显示状态；
原理：修改元素的display，实现隐藏；
指令后面的内容最终都会解析为布尔值；
值为true元素显示，值为false元素隐藏；
数据改变之后，对应元素的显示状态会同步更新。

v-if

作用：根据表达式的真假切换元素的显示状态；
本质是通过操作dom元素来切换显示状态；
表达式的值为true，元素存在于dom树中，若为false，从dom树中移除；

v-show与v-if的使用选择

v-show切换时消耗小，所以频繁的切换使用v-show，反之使用v-if。

实例说明

为了便于大家更好的理解，下面通过一个例子来进一步说明。

HTML实例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>v-show 与 v-if的区别</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-show切换显示状态"  @click="isShow_show">
        <input type="button" value="v-if切换显示状态"  @click="isShowIf_if">
        <h1 v-show="isShow">v-show切换显示状态使用的时display</h1>
        <h2 v-if="isShowIf">v-if切换显示状态操作的时dom</h2>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            isShow:true,
            isShowIf:true
        },
        methods:{
            isShow_show:function(){
                this.isShow=!this.isShow
            },
            isShowIf_if:function(){
                this.isShowIf=!this.isShowIf
            }
        }
    })
</script>
</html>

效果图

说明： 默认情况下，isShow 和 isShowIf 都为true，所以h1 h2都显示。当分别切换他们的显示状态时，通过控制台可知，v-show是通过对h1标签设置display：none实现隐藏的，而v-if则直接在dom树中将h2标签移除。
实例图片

忆弥

关注

1
点赞
踩
1

收藏

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

v-show作用：根据真假切换元素的显示状态；原理：修改元素的display，实现隐藏；指令后面的内容最终都会解析为布尔值；值为true元素显示，值为false元素隐藏；数据改变之后，对应元素的显示状态会同步更新。v-if作用：根据表达式的真假切换元素的显示状态；本质是通过操作dom元素来切换显示状态；表达式的值为true，元素存在于dom树中，若为false，从dom树中移除；v-show与v-if的使用选择 v-show切换时消耗小，所以频繁的切换使用v-show，反之使
复制链接

扫一扫