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

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【Vue】v-if与v-show的使用和区别（控制标签的显示、隐藏） -> 正文阅读

[JavaScript知识库]【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>
    <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>