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-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的区别