[基础]v-show和v-if的区别
- 场景
- v-show 的基本语法
- v-if 和 v-show 的区别
场景
在第11节中,我们学习了 v-if
和三元运算符,我相信小伙伴已经掌握的很好了。
这篇文章我们学一个和 v-if
很类似的语法 v-show
,以及它和 v-if
有什么区别,也算是一个补充课程。
v-show 的基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</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>willem</h2>
`
})
const vm=app.mount("#app")
</script>
</html>
准备好最基本的结构后,在数据项中声明一个 show
的变量。
data(){
return{
show:true,
}
},
有了变量后,可以在模板中使用 v-show
来控制CSS样式,从而控制DOM元素的展示与否。
template:`
<h2 v-show="show">willem</h2>
`
这时候打开浏览器进行预览,是可以看到 willem 这个h2的DOM元素的。
如果把数据项 show
改成 false
就看不到了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app=Vue.createApp({
data(){
return{
show:true,
}
},
template:`
<h2 v-show="show">willem</h2>
`
});
const vm=app.mount("#app");
</script>
</html>
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;">willem</h2>
现在回到 vscode 中的代码,在模板中再复制一行(在 vscode 中用 Alt+Shift+↓
就可以快速复制一行),这时候用 v-if 进行判断。
再次在浏览器中预览,你会发现整个DOM元素都不见了。
现在你应该明白了v-if 和v-show的区别,那如何使用他们呢?
这个就要看具体的需求了,如果显示和隐藏的状态切换比较频繁,并且没有什么多余复杂的业务逻辑,建议使用v-show,因为它不会一直渲染你的页面DOM元素,这或多或少对性能和稳定性有点提升,反之可以使用 v-if
。