vue setup实现登录注册功能代码

很高兴回答你的问题。以下是一个简单的 Vue 3 setup 实现登录注册功能的代码示例：

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

    <h2>注册</h2>
    <form @submit.prevent="register">
      <label>
        用户名：
        <input type="text" v-model="newUsername" />
      </label>
      <label>
        密码：
        <input type="password" v-model="newPassword" />
      </label>
      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const username = ref('');
    const password = ref('');
    const newUsername = ref('');
    const newPassword = ref('');

    const login = () => {
      // 发送登录请求
      console.log(`用户名：${username.value}，密码：${password.value}`);
    };

    const register = () => {
      // 发送注册请求
      console.log(`新用户名：${newUsername.value}，新密码：${newPassword.value}`);
    };

    return {
      username,
      password,
      newUsername,
      newPassword,
      login,
      register,
    };
  },
};
</script>

在这个示例中，我们使用了 Vue 3 的 `ref` 函数来创建响应式数据。我们创建了四个变量 `username`、`password`、`newUsername` 和 `newPassword`，分别用于存储用户输入的用户名和密码以及新用户的用户名和密码。我们还创建了两个函数 `login` 和 `register`，分别用于处理登录和注册的表单提交事件。在这两个函数中，我们可以向服务器发送请求，进行登录或注册操作。在模板中，我们使用 `v-model` 指令将表单元素与响应式数据绑定起来，使得用户输入的内容能够自动更新到对应的变量中。