【Vue】常用指令之v-show小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。 📝【Vue】学习养成记，【

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

📝【Vue】学习养成记，【程序员必备小知识】

📔 今日小知识——Vue常用指令之v-show

写在前面

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方文档：vuejs.org/v2/guide/sy…

中文文档: cn.vuejs.org/v2/guide/sy…

v-show指令介绍：

v-show 指令根据表达式的真假来显示元素和隐藏，是响应式的

v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。

1. v-show 代码举例

如下是html、 js 代码举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>v-show指令</title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="切换显示" @click="changeIsShow" />
			<p v-show="isShow">不装了，我摊牌了，没错你要找的就是我</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var  app = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					changeIsShow(){
						this.isShow = !this.isShow
					}
					
				}
			})
		</script>
	</body>
</html>

2. 渲染

渲染后代码如下

<p style="display: none;">不装了，我摊牌了，没错你要找的就是我</p>

3. 运行结果

代码的运行结果如下所示：

运行结果动图

4. 总结

v-show指令的作用是：根据真假值切换元素的显示状态
原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏
指令后面的内容最终都会解析为布尔值
值为真(true)的时候元素显示，值为假(false)的时候元素隐藏
数据改变之后呢对应的元素的显示状态也是会同步更新的

写在后面

关注我，更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的，可以来一波收藏+关注，以免你下次找不到我😁🌹

🌹欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！🌹