在平时浏览网页时,我们会惊醒一个登录或者是账号的注册,当你点击注册时,并不会跳转到宁外一个界面,而是在登录的页面出现注册页面,就像翻书一样,下面我将用 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>
这里通过自定义模板,注册组件,完成了页面的展示,再通过v-show的指令实现了页面的切换!