[day19]Vue实作-登入功能实作串接後端API(上)调整bootstrapvue

框架用好了之後，就是一些功能的串接罗，
还记得之前使用json串接的画面吗?现在要从网站的登入画面进行登入，同时也准备注册的画面
登愣
结果测试发现因为使用bootstrapvue又卡关了，这边直接秀出调整後的程序码

<div>
  <b-tabs content-class="mt-2">
    <b-tab title="Login" active>
        <h5 class="text-center">Login Please</h5>
        <div class="form-group">
            <label for="exampleInputEmail1">Account</label>
            <!-- <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> -->
            <input type="email" v-model="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter Account">
            <small class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <!-- <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> -->
            <input type="password" @keyup.enter="register" v-model="password" class="form-control" id="password" placeholder="Password">
        </div>

        <div class="form-group">
            <!-- <button class="btn btn-primary">Login</button> -->
            <button class="btn btn-primary" @click="login">Login</button>
        </div>
    </b-tab>
    <b-tab title="Register">
        

        <h5 class="text-center">Create New Account</h5>

        <div class="form-group">
            <label for="email">Account</label>
            <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter Account">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Password">
        </div>

        <div class="form-group">
            <!-- <button class="btn btn-primary">Register</button> -->
            <button class="btn btn-primary" @click="login">Login</button>
        </div>
    </b-tab> 
  </b-tabs>
</div>

两个画面可以正常切换罗

今天家庭出游，就写个段落~
明天正式连接後端的json server!!