hirokazumiyaji/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app">
      <form>
        <div v-if="isConfirm === true">
          <p>{{ email }}</p>
          <p>{{ password }}</p>
          <p>{{ passwordConfirm }}</p>
          <input type="hidden" name="email" value="{{ email }}">
          <input type="hidden" name="password" value="{{ password }}">
          <input type="hidden" name="password_confirm" value="{{ passwordConfirm }}">
          <button v-on:click="submit">登録する</button>
        </div>
        <div v-if="isConfirm === false">
          <input type="text" v-model="email">
          <input type="password" v-model="password">
          <input type="password" v-model="passwordConfirm">
          <button v-on:click="confirm">確認画面へ</button>
        </div>
      </form>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          email: "",
          password: "",
          passwordConfirm: "",
          isConfirm: false
        },
        methods: {
          confirm: function(e) {
            e.preventDefault();
            this.isConfirm = true;
          },
          submit: function(e) {
            e.preventDefault();
            console.log(this.email);
            console.log(this.password);
            console.log(this.passwordConfirm);
          }
        }
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Title</title>
	<meta charset="UTF-8">
	<script src="https://unpkg.com/vue"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
	<div id="app">
	<form>
	<div v-if="isConfirm === true">
	<p>{{ email }}</p>
	<p>{{ password }}</p>
	<p>{{ passwordConfirm }}</p>
	<input type="hidden" name="email" value="{{ email }}">
	<input type="hidden" name="password" value="{{ password }}">
	<input type="hidden" name="password_confirm" value="{{ passwordConfirm }}">
	<button v-on:click="submit">登録する</button>
	</div>
	<div v-if="isConfirm === false">
	<input type="text" v-model="email">
	<input type="password" v-model="password">
	<input type="password" v-model="passwordConfirm">
	<button v-on:click="confirm">確認画面へ</button>
	</div>
	</form>
	</div>
	<script>
	var app = new Vue({
	el: "#app",
	data: {
	email: "",
	password: "",
	passwordConfirm: "",
	isConfirm: false
	},
	methods: {
	confirm: function(e) {
	e.preventDefault();
	this.isConfirm = true;
	},
	submit: function(e) {
	e.preventDefault();
	console.log(this.email);
	console.log(this.password);
	console.log(this.passwordConfirm);
	}
	}
	});
	</script>
	</body>
	</html>