当前位置：码云笔记 > 前端 > 学习 Vue3 > 16. [基础]v-show和v-if的区别
码云码云 学习 Vue3

16. [基础]v-show和v-if的区别

AI 概述
在第 11 节中，我们学习了v-if和三元运算符，我相信小伙伴已经掌握的很好了。这篇文章我们学一个和v-if很类似的语法v-show，以及它和v-if有什么区别，也算是一个补充课程。 v-show 的基本语法 新建一个Demo16.html文件，复制Demo15.html的文件到Demo16.html里边，然后删除无用的代码，保留最简单的代码就可以。代码如下...

在第 11 节中，我们学习了v-if和三元运算符，我相信小伙伴已经掌握的很好了。这篇文章我们学一个和v-if很类似的语法v-show，以及它和v-if有什么区别，也算是一个补充课程。

v-show 的基本语法

新建一个Demo16.html文件，复制Demo15.html的文件到Demo16.html里边，然后删除无用的代码，保留最简单的代码就可以。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo16</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
    data(){
        return{

        }
    },
    template:`
        <h2>mybj123.com</h2>  
        ` 
    }) 
    const vm=app.mount("#app")
</script>
</html>

准备好最基本的结构后，在数据项中声明一个show的变量。

data(){
    return{
        show:true,
    }
},

有了变量后，可以在模板中使用v-show来控制 CSS 样式，从而控制 DOM 元素的展示与否。

template:`
    <h2 v-show="show">mybj123.com</h2>  
`

这时候打开浏览器进行预览，是可以看到mybj123.com这个 h2 的 DOM 元素的。如果把数据项show改成false就看不到了。

v-if 和 v-show 的区别

v-show看起来和v-if语法的功能基本一样，但其实他们无论是灵活性还是功能都是有区别的。

v-if更加灵活，可以增加多个判断，比如v-else-iif和else，而v-show不具备这样的灵活性。

v-show控制 DOM 元素显示，其实控制的是 css 样式，也就是display:none。现在你可以把data的值修改为 false，然后刷新浏览器，打开浏览器调试器的Elements选项卡，就可以清楚的看到，这时候<h2>标签上的 style 样式就是display:none。

<h2 style="display: none;">mybj123.com</h2>

现在回到 vscode 中的代码，在模板中再复制一行(在 vscode 中用Alt+Shift+↓就可以快速复制一行)，这时候用v-if进行判断。再次在浏览器中预览，你会发现整个 DOM 元素都不见了。

现在你应该明白了v-if 和v-show的区别，那如何使用他们呢？这个就要看具体的需求了，如果显示和隐藏的状态切换比较频繁，并且没有什么多余复杂的业务逻辑，建议使用v-show，因为它不会一直渲染你的页面 DOM 元素，这或多或少对性能和稳定性有点提升，反之可以使用v-if。

以上关于16. [基础]v-show和v-if的区别的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 16. [基础]v-show和v-if的区别

码云 SVIP

分享到：

相关推荐

发表回复