Vue3实现表单输入的双向绑定的示例代码

<template>
  <div>
    <label for="name">姓名:</label>
    <input type="text" id="name" v-model="name" />
    <p>您输入的姓名是: {{ name }}</p>
  </div>
</template>

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

export default {
  setup() {
    const name = ref('');

    return {
      name,
    };
  },
};
</script>

<style>
/* 这里可以添加CSS样式 */
</style>

<template>
  <div>
    <h1>用户注册</h1>
    <form>
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="user.username" />
      </div>
      <div>
        <label for="email">邮箱:</label>
        <input type="email" id="email" v-model="user.email" />
      </div>
      <div>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="user.password" />
      </div>
      <button type="button" @click="register">注册</button>
    </form>
    <div v-if="registeredUser">
      <h2>注册成功的用户信息:</h2>
      <p>用户名: {{ registeredUser.username }}</p>
      <p>邮箱: {{ registeredUser.email }}</p>
    </div>
  </div>
</template>

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

export default {
  setup() {
    const user = ref({
      username: '',
      email: '',
      password: '',
    });
    
    const registeredUser = ref(null);

    const register = () => {
      registeredUser.value = { ...user.value }; // 模拟注册
      // 可以在这里添加注册API调用等操作
    };

    return {
      user,
      registeredUser,
      register,
    };
  },
};
</script>

<style>
/* 可以添加样式 */
</style>