vue form表单最简写法

舜岳

于 2020-07-12 09:52:13 发布

阅读量2.3k

点赞数

分类专栏： vue 文章标签： vue form submit

本文链接：https://blog.csdn.net/qq_41614928/article/details/107295366

版权

vue 专栏收录该内容

80 篇文章 8 订阅

订阅专栏

vue form表单最简单写法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <title>vue</title>
</head>
<body>
  <div id="app">
    <form @submit.prevent="submitPost">
      <input type="text" name="name">
      <input type="password" name="pass">
      <div>
        <input type="checkbox" name="ischeckbox">
        <input type="radio" name="isradio">
        <div>
          <input type="mail" name="mail">
          <div>
            <input type="file" name="img">
          </div>
        </div>
      </div>
      <input type="submit" value="提交">
    </form>
  </div>
  <script>
  const app = new Vue({
      el: '#app',
      data: {
      },
      methods: {
        submitPost(event) {
          const formData = new FormData(event.target)
          for (let [a, b] of formData) {
            console.log('所有表单填写的内容：'+ a, b);
          }
        }
      }
  });
  </script>
</body>
</html>