vue登录注册

最新推荐文章于 2024-09-13 14:34:15 发布

无畏-小丑

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量111

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_74829849/article/details/140138500

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录与注册组件切换</title>
        <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> -->
        <script src="vue.global.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 父组件模板 -->
            <div v-if="showLogin">
                <!-- 登录组件模板 -->
                <div>
                    <h2>登录</h2>
                    <input v-model="loginUsername" type="text" placeholder="用户名">
                    <input v-model="loginPassword" type="password" placeholder="密码">
                    <button @click="login">登录</button>
                </div>
            </div>
            <div v-else>
                <!-- 注册组件模板 -->
                <div>
                    <h2>注册</h2>
                    <input v-model="registerUsername" type="text" placeholder="用户名">
                    <input v-model="registerPassword" type="password" placeholder="密码">
                    <button @click="register">注册</button>
                </div>
            </div>
        </div>

        <script>
            const App = {
                data() {
                    return {
                        showLogin: true, // 控制显示登录还是注册组件  
                        loginUsername: '',
                        loginPassword: '',
                        registerUsername: '',
                        registerPassword: ''
                    };
                },
                methods: {
                    login() {
                        console.log('登录', this.loginUsername, this.loginPassword);
                        // 假设登录成功，显示注册组件  
                        this.showLogin = false;
                    },
                    register() {
                        console.log('注册', this.registerUsername, this.registerPassword);
                        // 假设注册成功，这里可以重置表单或导航到另一个页面  
                    }
                }
            };

            Vue.createApp(App).mount('#app'); // 创建Vue应用并挂载到#app元素上  
        </script>
    </body>
</html>