组件跳转
利用组件， 实现登录和注册的界面切换
1、创建组件
index.vue
<template>
<div>
<Longin v-if="isLogin"></Longin>
<Register v-else></Register>
<a v-on:click="isLoginFun()" class="login" >登录</a>
<a v-on:click="isRegisterFun()" class="register">注册</a>
</div>
</template>
<script>
import Longin from "./login.vue"
import Register from "./register.vue"
export default {
components: {
Longin,
Register
},
data() {
return{
title: "首页",
isLogin: true
}
},
methods:{
isLoginFun() {
if (this.isLogin) {
return;
}
this.isLogin = true;
},
isRegisterFun() {
if (!this.isLogin){
return;
}
this.isLogin = false;
}
},
}
</script>
<style>
a{
padding: 0px 20px;
}
</style>
login.vue
<template>
<div>
<h1>{{title}}</h1>
<p>
<label>用户名：</label> <input type="text" placeholder="用户名" />
</p>
<p>
<label>密码：</label> <input type="password" placeholder="密码" />
</p>
</div>
</template>
<script>
export default {
name: 'Login',
data() {
return{
title: "登录"
}
}
}
</script>
<style>
</style>
register.vue
<template>
<div>
<h1>{{title}}</h1>
<p>
<label>用户名：</label> <input type="text" placeholder="用户名" />
</p>
<p>
<label>密码：</label> <input type="password" placeholder="密码" />
</p>
<p>
<label>确认密码：</label> <input type="password" placeholder="确认密码" />
</p>
<input type="button" value="注册" />
</div>
</template>
<script>
export default{
name: 'Register',
data() {
return{
title: "注册"
}
}
}
</script>
<style>
</style>
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Index></Index>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import Index from './components/loginAndReg/index.vue'
export default {
name: 'app',
components: {
Index
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
启动项目
点击注册
