VUE登录注册页面,完整vue，直接复制

作者：System 时间：2024年08月07日分类：所有,vue.js 字数：1879

以下是一个简单的Vue登录注册页面的示例代码。请确保你已经安装了Vue CLI并创建了一个新的Vue项目，或者你可以直接在浏览器中使用Vue CDN。




<!DOCTYPE html>
<html>
<head>
    <title>Vue 登录注册页面</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <div v-if="!isLoggedIn">
            <h2>登录</h2>
            <input type="text" v-model="loginForm.username" placeholder="用户名">
            <input type="password" v-model="loginForm.password" placeholder="密码">
            <button @click="login">登录</button>
 
            <h2>注册</h2>
            <input type="text" v-model="registerForm.username" placeholder="用户名">
            <input type="password" v-model="registerForm.password" placeholder="密码">
            <button @click="register">注册</button>
        </div>
        <div v-else>
            <h2>你已登录</h2>
            <button @click="logout">退出登录</button>
        </div>
    </div>
 
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    isLoggedIn: false,
                    loginForm: {
                        username: '',
                        password: ''
                    },
                    registerForm: {
                        username: '',
                        password: ''
                    }
                }
            },
            methods: {
                login() {
                    // 这里应该是用户验证逻辑，例如发送API请求
                    this.isLoggedIn = true;
                },
                register() {
                    // 这里应该是用户注册逻辑，例如发送API请求
                    this.isLoggedIn = true;
                },
                logout() {
                    this.isLoggedIn = false;
                }
            }
        });
 
        app.mount('#app');
    </script>
</body>
</html>

这段代码提供了一个简单的登录注册页面，并且使用了Vue的双向数据绑定和事件处理。在实际应用中，登录和注册的逻辑需要替换为API请求以与后端通信。

VUE登录注册页面,完整vue，直接复制

评论已关闭

推荐阅读