天天看點

vue form表單最簡寫法

vue form表單最簡單寫法:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>