2019-04-09 18:57:48 UNSELECTED

<meta http-equiv="content-type" charset="utf-8"> <

Copy Copied! Full
<meta http-equiv="content-type" charset="utf-8"> <script src="https://unpkg.com/vue@2.5.17"></script> <div id="login-example"> <user-login></user-login> </div> <!-- テンプレート --> <script type="text/x-template" id="login-template"> <div id="login-template"> <div> <input type="text" placeholder="ログインID" v-model="userid"> </div> <div> <input type="password" placeholder="パスワード" v-model="password"> </div> <button @click="login()">ログイン</button> </div> </script> <script> // コンポーネント定義 Vue.component('user-login', { template: '#login-template', data:{ userid: '', password: '', }, methods: { login: function () { auth.login(this.userid, this.password); } } }) // ログイン周りのダミー var auth = { login: function(id, pass){ window.alert("userid:" + id + "\n" + "password:" + pass); } } new Vue({ el: "#login-example" }); </script>
<meta http-equiv="content-type" charset="utf-8">
<script src="https://unpkg.com/vue@2.5.17"></script>
<div id="login-example">
  <user-login></user-login>
</div>

<!-- テンプレート -->
<script type="text/x-template" id="login-template">
  <div id="login-template">
    <div>
      <input type="text" placeholder="ログインID" v-model="userid">
    </div>
    <div>
      <input type="password" placeholder="パスワード" v-model="password">
    </div>
    <button @click="login()">ログイン</button>
  </div>
</script>

<script>
// コンポーネント定義
Vue.component('user-login', {
  template: '#login-template',
  data:{ 
      userid: '',
      password: '',
    
  },
  methods: {
    login: function () {
      auth.login(this.userid, this.password);
    }
  }
})
// ログイン周りのダミー
var auth = {
  login: function(id, pass){
    window.alert("userid:" + id + "\n" + "password:" + pass);
  }
}
new Vue({
  el: "#login-example"
});
</script>
RECOMMEND