Vue-简单组件跳转

组件跳转

　　利用组件， 实现登录和注册的界面切换

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>

启动项目

 

 点击注册