19.《vue之双组件切换 v-show》

最新推荐文章于 2023-11-18 16:59:59 发布

@逆风微笑代码狗

最新推荐文章于 2023-11-18 16:59:59 发布

阅读量902

点赞数 2

分类专栏：笔记文章标签： vue js

本文链接：https://blog.csdn.net/qq_44864082/article/details/106632514

版权

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

在平时浏览网页时，我们会惊醒一个登录或者是账号的注册，当你点击注册时，并不会跳转到宁外一个界面，而是在登录的页面出现注册页面，就像翻书一样，下面我将用 vue自定义组件简单的实现这个功能

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>双组件切换  v-show v-if</title>
	</head>
	<script type="text/javascript" src="js/vue.js" ></script>
	<body>
		<div  id="APP">
			<!--构建两个按钮-->
			<a href="#"  @click="flag=true">登录界面</a>
			<a href="#"  @click="flag=false">注册界面</a>
			
			<login v-show="flag"></login>
			<register v-show="!flag"></register>
		</div>
		
		<!--定义模板-->
		<template id="login">
			<div>登录界面</div>
		</template>
		<template id="register">
			<div>注册界面</div>7
		</template>
		<script>
			//把模板注册成组件
			var tempLogin={
				template:'#login'
			};
			var tempRegister={
				template:'#register'
			};
			
			var vr=new Vue({
				el:"#APP",
				components:{
					//组件名  模板对象				
					login:tempLogin,
					register:tempRegister
				},
				data:{
					flag:true
				}
			});
		</script>
	</body>
</html>