vue登录注册页面代码

以下是一个简单的 Vue 登录注册页面的代码示例：

<template>
  <div>
    <form v-if="isLogin" @submit.prevent="login">
      <h2>登录</h2>
      <label>
        用户名：
        <input type="text" v-model="username">
      </label>
      <label>
        密码：
        <input type="password" v-model="password">
      </label>
      <button type="submit">登录</button>
    </form>
    <form v-else @submit.prevent="register">
      <h2>注册</h2>
      <label>
        用户名：
        <input type="text" v-model="username">
      </label>
      <label>
        密码：
        <input type="password" v-model="password">
      </label>
      <label>
        确认密码：
        <input type="password" v-model="confirmPassword">
      </label>
      <button type="submit">注册</button>
    </form>
    <button @click="toggleForm">{{ isLogin ? '注册' : '登录' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: true,
      username: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    toggleForm() {
      this.isLogin = !this.isLogin
    },
    login() {
      // 调用后端登录接口
    },
    register() {
      // 调用后端注册接口
    }
  }
}
</script>

在这个示例中，我们使用了两个表单来实现登录和注册功能，并通过 `v-if` 和 `v-else` 控制它们的显示和隐藏。在表单中，我们使用了 `v-model` 来与组件的数据绑定。当用户提交表单时，我们调用 `login` 或 `register` 方法来向后端发送登录或注册请求。我们还添加了一个按钮来切换登录和注册表单的显示。

当然，这个示例只是一个基础的登录注册页面，实际中你需要考虑更多的安全和用户体验方面的问题。