vue实现登录注册切换

Vue 实现登录注册切换

在 Vue 中实现登录和注册表单的切换功能，可以通过动态组件或条件渲染实现。以下是两种常见的实现方式：

动态组件切换

利用 Vue 的 component 动态组件和 v-bind:is 实现登录和注册组件的切换。

<template>
  <div>
    <button @click="currentComponent = 'LoginForm'">登录</button>
    <button @click="currentComponent = 'RegisterForm'">注册</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import LoginForm from './LoginForm.vue';
import RegisterForm from './RegisterForm.vue';

export default {
  data() {
    return {
      currentComponent: 'LoginForm'
    };
  },
  components: {
    LoginForm,
    RegisterForm
  }
};
</script>

条件渲染切换

通过 v-if 或 v-show 控制登录和注册表单的显示与隐藏。

<template>
  <div>
    <button @click="showLogin = true">登录</button>
    <button @click="showLogin = false">注册</button>
    <LoginForm v-if="showLogin" />
    <RegisterForm v-else />
  </div>
</template>

<script>
import LoginForm from './LoginForm.vue';
import RegisterForm from './RegisterForm.vue';

export default {
  data() {
    return {
      showLogin: true
    };
  },
  components: {
    LoginForm,
    RegisterForm
  }
};
</script>

表单组件示例

登录表单组件 LoginForm.vue 的基本结构：

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="email" type="email" placeholder="邮箱" required />
    <input v-model="password" type="password" placeholder="密码" required />
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      console.log('登录信息:', this.email, this.password);
    }
  }
};
</script>

注册表单组件 RegisterForm.vue 的基本结构：

<template>
  <form @submit.prevent="handleRegister">
    <input v-model="email" type="email" placeholder="邮箱" required />
    <input v-model="password" type="password" placeholder="密码" required />
    <input v-model="confirmPassword" type="password" placeholder="确认密码" required />
    <button type="submit">注册</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: '',
      confirmPassword: ''
    };
  },
  methods: {
    handleRegister() {
      console.log('注册信息:', this.email, this.password);
    }
  }
};
</script>

样式优化

通过 CSS 为切换按钮和表单添加样式，提升用户体验。

<style scoped>
button {
  margin: 0 10px;
  padding: 8px 16px;
  cursor: pointer;
}
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
input {
  padding: 8px;
  border: 1px solid #ccc;
}
</style>

以上方法可以根据实际需求进行调整，例如添加表单验证、动画效果或状态管理。