vue-cli入門（三）——vue-resource登入註冊例項
阿新 • • 發佈：2019-02-14
<template>
<div>
<div class="login-wrap" v-show="showLogin">
<h3>登入</h3>
<p v-show="showTishi">{{tishi}}</p>
<input type="text" placeholder="請輸入使用者名稱" v-model="username">
<input type="password" placeholder="請輸入密碼" v-model="password">
<button v-on:click="login">登入</button>
<span v-on:click="ToRegister">沒有賬號？馬上註冊</span>
</div>
<div class="register-wrap" v-show="showRegister">
<h3>註冊</h3>
<p v-show="showTishi">{{tishi}}</p>
<input type="text" placeholder="請輸入使用者名稱" v-model="newUsername">
<input type="password" placeholder="請輸入密碼" v-model="newPassword">
<button v-on:click="register">註冊</button>
<span v-on:click="ToLogin">已有賬號？馬上登入</span>
</div>
</div>
</template>
<style>
.login-wrap{text-align:center;}
input{display:block; width:250px; height:40px; line-height:40px; margin:0 auto; margin-bottom: 10px; outline:none; border:1px solid #888; padding:10px; box-sizing:border-box;}
p{color:red;}
button{display:block; width:250px; height:40px; line-height: 40px; margin:0 auto; border:none; background-color:#41b883; color:#fff; font-size:16px; margin-bottom:5px;}
span{cursor:pointer;}
span:hover{color:#41b883;}
</style>
<script>
export default{
data(){
return{
showLogin: true,
showRegister: false,
showTishi: false,
tishi: '',
username: '',
password: '',
newUsername: '',
newPassword: ''
}
}
}
</script>