用vue写一个登录注册界面

好的，下面是一个简单的登录注册界面的 Vue 代码示例：

<template>
  <div class="container">
    <h2>{{ title }}</h2>
    <div v-if="isLoginForm">
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="email">
      <label for="password">Password:</label>
      <input type="password" id="password" v-model="password">
    </div>
    <div v-else>
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="name">
      <label for="new-email">Email:</label>
      <input type="email" id="new-email" v-model="newEmail">
      <label for="new-password">Password:</label>
      <input type="password" id="new-password" v-model="newPassword">
    </div>
    <button @click="isLoginForm ? login() : register()">{{ isLoginForm ? 'Login' : 'Register' }}</button>
    <div v-if="errorMessage">{{ errorMessage }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Login/Register',
      isLoginForm: true,
      email: '',
      password: '',
      name: '',
      newEmail: '',
      newPassword: '',
      errorMessage: ''
    }
  },
  methods: {
    login() {
      // Send login request with email and password
      // If successful, redirect to dashboard
      // If unsuccessful, display error message
      console.log(`Logging in with email: ${this.email} and password: ${this.password}`)
    },
    register() {
      // Send register request with name, email, and password
      // If successful, redirect to dashboard
      // If unsuccessful, display error message
      console.log(`Registering with name: ${this.name}, email: ${this.newEmail}, and password: ${this.newPassword}`)
    }
  }
}
</script>

<style>
.container {
  width: 400px;
  margin: 50px auto;
  text-align: center;
}
label {
  display: block;
  margin-bottom: 10px;
}
input {
  width: 100%;
  padding: 5px 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  margin-top: 20px;
}
button:hover {
  background-color: #3e8e41;
}
</style>

这个示例中，我们使用了一个 `isLoginForm` 的变量来判断当前是展示登录表单还是注册表单。在点击按钮时，会根据当前是登录还是注册表单来执行不同的方法。这里的方法只是简单的 console.log，真正的登录和注册逻辑需要根据实际情况进行编写。

此外，我们还用了一个 `errorMessage` 变量来展示错误信息。在登录或注册失败时，需要将错误信息赋值给这个变量。

最后，为了让界面看起来更美观，我们添加了一些 CSS 样式。