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

在第 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-iifelse,而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

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 16. [基础]v-show和v-if的区别

发表回复