Vue.js 通过Vue获取表单提交的输入字段值

在本文中，我们将介绍如何使用Vue.js获取表单提交的输入字段值。Vue.js是一种流行的JavaScript框架，它使得构建交互式用户界面变得更加容易和高效。

创建一个简单的表单

首先，我们需要创建一个简单的表单。我们可以使用HTML标签来创建一个包含输入字段的表单，并在提交按钮上添加一个事件监听器。下面是一个例子：

<template>
  <form @submit="handleSubmit">
    <label for="name">姓名：</label>
    <input type="text" id="name" v-model="name">

    <label for="email">邮箱：</label>
    <input type="email" id="email" v-model="email">

    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      email: ""
    };
  },

  methods: {
    handleSubmit(event) {
      event.preventDefault();
      console.log("姓名：" + this.name);
      console.log("邮箱：" + this.email);
      // 在这里可以进行表单数据的处理和提交
    }
  }
};
</script>

在上面的代码中，我们使用了v-model指令来实现数据双向绑定。这意味着我们可以直接在Vue实例中访问和修改输入字段的值。

在handleSubmit方法中，我们使用event.preventDefault()来阻止表单的默认行为，即阻止页面的刷新。然后，我们可以通过this.name和this.email来获取输入字段的值，并进行相关的处理和提交。

动态绑定表单字段

除了使用v-model指令之外，我们还可以通过动态绑定来设置和获取表单字段的值。下面是一个例子：

<template>
  <form @submit="handleSubmit">
    <label for="name">姓名：</label>
    <input type="text" id="name" :value="name" @input="name =  $event.target.value"> <label for="email">邮箱：</label> <input type="email" id="email" :value="email" @input="email =$ event.target.value">

    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      email: ""
    };
  },

  methods: {
    handleSubmit(event) {
      event.preventDefault();
      console.log("姓名：" + this.name);
      console.log("邮箱：" + this.email);
      // 在这里可以进行表单数据的处理和提交
    }
  }
};
</script>

在上面的代码中，我们没有使用v-model指令，而是使用了value属性和@input事件来动态绑定表单字段的值。当输入字段的值发生改变时，我们通过$event.target.value获取新的值，并将其赋给相关的数据属性。

获取表单字段的值

在表单提交时，我们可以通过Vue实例中的数据属性直接访问表单字段的值。在上面的例子中，我们可以通过this.name和this.email来获取姓名和邮箱的值。

我们还可以使用event.target.elements来访问表单中的所有字段。下面是一个例子：

<template>
  <form @submit="handleSubmit">
    <label for="name">姓名：</label>
    <input type="text" id="name" v-model="name">

    <label for="email">邮箱：</label>
    <input type="email" id="email" v-model="email">

    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      email: ""
    };
  },

  methods: {
    handleSubmit(event) {
      event.preventDefault();

      const formData = new FormData(event.target);
      console.log("姓名：" + formData.get("name"));
      console.log("邮箱：" + formData.get("email"));
      // 在这里可以进行表单数据的处理和提交
    }
  }
};
</script>

在上面的代码中，我们使用event.target.elements来访问表单中的所有字段，并创建了一个FormData对象来处理表单数据。通过FormData对象的get方法，我们可以根据字段的名称获取其对应的值。