vue3 表单数据回显的例子

在 Vue3 中，表单数据的回显通常涉及到组件的状态管理以及数据绑定。假设你有一个用户信息组件，需要在页面加载时显示用户的已有信息，可以这样做：

<template>
  <div>
    <input v-model="user.name" placeholder="姓名">
    <input v-model="user.email" placeholder="邮箱">
    <!-- 更多输入字段... -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: this.defaultName,
        email: this.defaultEmail, // 这里默认值可能是从服务器获取的，或者存储在本地
      },
    };
  },
  computed: {
    defaultName() { /* 获取默认的姓名 */ }, // 可能是从服务器返回的缓存数据
    defaultEmail() { /* 获取默认的邮箱 */ },
  },
};
</script>

在这个例子中，`v-model` 指令用于双向数据绑定。当你初次渲染页面时，`user` 对象会自动设置默认值。如果用户已经有之前填写的信息，你可以替换 `defaultName` 和 `defaultEmail` 的计算属性，从服务器端的数据、Vuex store 或者 local storage 中读取。