vue切换组件基础模板

需求：登录注册两个按钮，点击登录的时候登录显示，点击注册的时候注册显示，另外一个隐藏

如下图所示先定义两个template组件

    <template id="login">
        <div>
            <h2>用户登录</h2>
            <p>
                用户名：<input type="text" v-model="username">
            </p>
            <p>
                密&emsp;码：<input type="password" v-model="userPwd">
            </p>
            <p>
                <button @click="toLogin">登&emsp;录</button>
            </p>
        </div>
    </template>
    <template id="register">
        <div>
            <h2>用户登录</h2>
            <p>
                用户名：<input type="text" v-model="username">
            </p>
            <p>
                密&emsp;码：<input type="password" v-model="userPwd">
            </p>
            <p>
                性&emsp;别：
                <label for="">
                    <input type="radio" name="sex" v-model="sex">男
                </label>
                <label for="">
                    <input type="radio" name="sex" v-model="sex">女
                </label>
            </p>
            <p>
                <button @click="toReg">注&emsp;册</button>
            </p>
        </div>
    </template>

并且在各自的组件中进行初始化数据，

 <script>
        // 注册组件的模板
        Vue.component('login', {
            template:'#login',
            data () {
                return {
                    username:'',
                    userPwd:''
                }
            },
            methods: {
                toLogin(){
                    console.log('要提交的登录数据'+this.username + this.userPwd);
                }
            }
        })

        Vue.component('register', {
            template:'#register',
            data () {
                return {
                    username:'',
                    userPwd:'',
                    sex:'',
                }
            },
            methods: {
                toReg(){
                    console.log('要提交的注册数据'+this.username + this.userPwd);
                }
            }
        })
        let vm = new Vue({
            el : "#app",
            data : {
                flag:true,
            }
        })
    </script>

我们使用v-if 和else-if来进行控制两个标签的切换：

    <div id="app">
        <a @click.prevent="flag=true" href="">登录</a>  注意：这里的prevent是阻止默认事件，如果不这样子页面会刷新一下，有问题
        <a @click.prevent="flag=false" href="">注册</a>
        <login v-if="flag"></login>
        <register v-else></register>
    </div>