vue给form表单赋值

在 Vue 中给表单赋值，可以使用 `v-model` 或者直接给表单元素绑定 `value` 属性来实现。

假设有一个表单，包含两个输入框：用户名和密码。可以先定义一个对象，用于存储表单数据：

data() {
  return {
    form: {
      username: '',
      password: ''
    }
  }
}

然后，在模板中使用 `v-model` 指令将表单元素与 `form` 对象中的属性绑定起来：

<form>
  <label>用户名：</label>
  <input type="text" v-model="form.username"><br>
  <label>密码：</label>
  <input type="password" v-model="form.password"><br>
</form>

接下来，可以在组件的 `created` 生命周期中，通过后台接口获取表单数据，并将其赋值给 `form` 对象：

created() {
  // 调用后台接口获取表单数据
  fetchFormData().then((data) => {
    // 将数据赋值给 form 对象
    this.form.username = data.username;
    this.form.password = data.password;
  });
}

这样，页面渲染时，表单元素就会自动显示后台返回的数据了。如果需要重新给表单赋值，只需要修改 `form` 对象中对应的属性即可。