【前端框架Vue】基本指令：v-show

最新推荐文章于 2024-04-12 07:27:07 发布

程序酷巴戈

最新推荐文章于 2024-04-12 07:27:07 发布

阅读量587

点赞数 20

分类专栏：前端框架Vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_55723857/article/details/134983797

版权

前端框架Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本次主要介绍Vue的基本指令：v-show

使用工具：HbuilderX

v-show是什么？

为了帮助理解概念，举一个例子，登录注册页面相信都不陌生。在我们CSDN上登录时，就有三种登录方式，看下面图示。

可以发现除了中间区域的登录方式不同外，底部的一些icon和顶部是基本一致的，而且我们切换登录方式，页面也是肉眼看基本不用刷新的。

那么在我们现在所学的里面，v-show就可以达到这种切换的效果（并不是说csdn就是这么做的哈）。简单来说，v-show是根据表达式的真假值来控制元素的显示与隐藏；即，v-show为真，就显示，v-show为假，就不显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>csdnWebPage</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id='app'>
			<button type='button' @click="toggleForm">切换</button>

			<div v-show="showLogin">
				<!-- 登录表单 -->
				<h2>登录</h2>
				<form>
					用户名：<input type="text" /> <br />
					密码：<input type="password" />
				</form>
			</div>

			<div v-show="!showLogin">
				<!-- 注册表单 -->
				<h2>注册</h2>
				<form>
					手机：<input type="text" /> <br />
					密码：<input type="password" /><br />
					确认密码：<input type="password" />
				</form>
			</div>
		</div>
		<script>
			var csdnWeb = {
				data() {
					return {
						showLogin: true,
					};
				},
				methods: {
					toggleForm() {
						
						this.showLogin = !this.showLogin;
					},
				},
			};
			var App = Vue.createApp(csdnWeb)
			App.mount('#app')
		</script>
	</body>
</html>

第一次进入此页面时，显示登录的表单，因为此时，v-show为true。我们可以同时看下浏览器的js代码：可以看到注册的display值为none。