【Vue】v-if与v-show的使用和区别（控制标签的显示、隐藏）

最新推荐文章于 2022-11-29 00:11:04 发布

Alkaid:

最新推荐文章于 2022-11-29 00:11:04 发布

阅读量649

点赞数 2

分类专栏： Vue 文章标签： html

本文链接：https://blog.csdn.net/weixin_45867159/article/details/120210309

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

v-if和v-show都是用于控制标签的显示、隐藏

区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示或隐藏标签</title>
</head>
<body>
<div id="app">
    <p v-if="false">欢迎您：张三</p>
    <p v-show="false">欢迎您：李四</p>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app"
    });
</script>

在这里插入图片描述
由上述案例可知：
v-if：底层是通过DOM的添加、删除结点来实现的
v-show：底层是同样css样式的display:none来实现的

当显示、隐藏比较频繁时，建议采用v-show；当显示、隐藏不频繁时，可以采用v-if

使用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示或隐藏标签</title>
</head>
<div id="app">
    <p v-if="false">欢迎您：张三</p>
    <p v-show="false">欢迎您：李四</p>
    <hr>
    <p v-if="isShow">欢迎您：张三</p>
    <p v-show="isShow">欢迎您：李四</p>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow: false,
        }
    });
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示或隐藏标签</title>
</head>
<body>
<div id="app">
    <p v-show="isShow">下午好</p>

    <button @click="show">显示</button>
    <button @click="hide">隐藏</button>
    <hr>
    <!--  另一种-->
    <button @click="isShow=true">显示</button>
    <button @click="isShow=false">隐藏</button>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow: true
        },
        methods: {
            show() {
                this.isShow = true;
            },
            hide() {
                this.isShow = false;
            }
        }
    });
</script>

Alkaid:

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue】v-if与v-show的使用和区别（控制标签的显示、隐藏）

v-if和v-show都是用于控制标签的显示、隐藏区别<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>显示或隐藏标签</title></head><body><div id="app"> <p v-if="false">欢迎您：张三</p> &l
复制链接

扫一扫