vue登录和注册实验代码

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

<template>
  <div>
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <label>用户名:</label>
      <input type="text" v-model="loginForm.username" required>
      <br>
      <label>密码:</label>
      <input type="password" v-model="loginForm.password" required>
      <br>
      <button type="submit">登录</button>
    </form>

    <h2>注册</h2>
    <form @submit.prevent="handleRegister">
      <label>用户名:</label>
      <input type="text" v-model="registerForm.username" required>
      <br>
      <label>密码:</label>
      <input type="password" v-model="registerForm.password" required>
      <br>
      <label>确认密码:</label>
      <input type="password" v-model="registerForm.confirmPassword" required>
      <br>
      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    handleLogin() {
      // 处理登录逻辑
      console.log('登录', this.loginForm)
    },
    handleRegister() {
      // 处理注册逻辑
      console.log('注册', this.registerForm)
    }
  }
}
</script>

在这个示例中，我们使用了两个表单分别来处理登录和注册。我们在 `data` 中定义了 `loginForm` 和 `registerForm` 两个对象，分别包含了表单中的用户名和密码等字段。我们在表单中使用了 `v-model` 来绑定这些字段，用户输入后会自动更新到我们的数据模型中。

我们还定义了两个方法 `handleLogin` 和 `handleRegister` 来处理表单提交事件，这两个方法分别会在用户点击登录或注册按钮时触发。

当用户点击登录或注册按钮时，我们会在控制台上输出表单数据，你可以根据自己的实际需求在这里加入具体的登录和注册逻辑。