vue3 form表单对象赋值

在Vue.js中，可以使用v-model指令实现双向数据绑定，将表单元素的值与Vue实例中的数据属性进行关联。通过给v-model指令绑定一个数据属性，可以实现表单元素的值与该数据属性的双向绑定。

下面是一个示例，演示了如何在Vue.js 3中实现表单对象的赋值：

<template>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="formData.name">
    
    <label for="email">Email:</label>
    <input type="email" id="email" v-model="formData.email">
    
    <button @click="submitForm">Submit</button>
  </form>
</template>

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

export default {
  setup() {
    const formData = ref({
      name: '',
      email: ''
    });

    const submitForm = () => {
      // 在这里可以访问表单对象的值
      console.log(formData.value.name);
      console.log(formData.value.email);
    };

    return {
      formData,
      submitForm
    };
  }
};
</script>

在上面的示例中，我们使用了Vue.js 3的Composition API来定义组件。通过`ref`函数创建了一个响应式的`formData`对象，其中包含了`name`和`email`两个属性。在模板中，我们使用`v-model`指令将表单元素与`formData`对象的对应属性进行绑定。当表单元素的值发生变化时，`formData`对象的对应属性也会更新。在`submitForm`方法中，我们可以访问到表单对象的值。