vue 给form表单赋值_vue获取form表单的值示例

以下是一个示例代码，展示了如何使用Vue给表单赋值并获取表单的值：

<template>
  <div>
    <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.prevent="submitForm">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: "",
        email: "",
      },
    };
  },
  methods: {
    submitForm() {
      // 获取表单的值
      const { name, email } = this.formData;
      console.log("Name:", name);
      console.log("Email:", email);

      // 在这里可以进行表单提交的操作
    },
  },
};
</script>

在上面的示例中，我们使用`v-model`指令将表单元素与Vue实例中的`formData`对象进行双向绑定。当用户输入值时，`formData`对象中的对应属性会自动更新。在`submitForm`方法中，我们可以通过访问`this.formData`来获取表单的值，并进行相应的操作。

请注意，示例中的`@click.prevent`会阻止表单默认的提交行为，以便在Vue中处理表单提交逻辑。