2.6.2 登陆界面及逻辑

接下来我们要模拟一下登录，基本逻辑是这样：
1.账号密码匹配，登录成功，跳转到Home（内容就是原来的app.vue）
2.账号密码不匹配，登录失败，弹出框提示。

我们是模拟登录，所以用户名和密码都是固定在Login.vue里面的，账号为abc，密码是123
首先我们要获取用户输入的账号和密码，只需要定义两个变量，然后绑定到两个输入框就可以了，首先修改html部分：
<template>
    <form action="">
    <span>账号</span>
    <input type="text" name="username" v-model="username"/>
    <br/>
    <span>密码</span>
    <input type="password" name="psw" v-model="password"/>
    <br/>
    <input type="button" value="登录"/>
    </form>
</template>
Login.vue的Script部分，要参考Home.vue(也就是之前的App.vue)
username和password两个变量，用v-model绑定到两个输入框，也就是说输入账号，它的值就到了username，密码也是，输入密码，值就到了password。接下来在script部分定义username和password两个变量：
<script>
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password:""
    };
  },
};
</script>

启动项目，访问此页面，看看有没有出错。
然后添加登录按钮的响应函数，一般来说这称为“单击事件”，以及响应事件，把template的第9行代码改成这样：
<input type="button" value="登录" @click="login"/>
@click="login"表示用login函数响应单击事件，click就是单击。
然后添加下面代码到script，
methods: {
    login() {
      console.log("测试")
      console.log(this.username);
      console.log(this.password)
    }
}
添加完如图所示，注意24行最后的逗号：
这时候，按下登录按钮的时候，就有反应了，console.log是在浏览器控制台打印信息，我们给什么此函数就打印什么，我们打开浏览器，按下F12，可以打开这个控制台，然后点击登录按钮，可以看到：
abc是输入框的账号，1234345是密码，这一步说明已经获取到账号和密码的值。this.usename里面的this不能省略，表示本页面，this.username就指代data里面的username，如果变量不存在，就会出错。
现在添加模拟的验证账号和密码，我们只简单验证账号是不是abc并且密码是不是123，（前面的三行打印信息可以注释掉了，这仅仅是看看能否响应、能否获取到账号和密码）
代码如下，alert就是网页弹出框：
login(){
    console.log("测试");
    console.log(this.username);
    console.log(this.password);
    if(this.username=="abc" && this.password=="123"){
        alert("登录成功！");
    }
    else{
        alert("账号或密码错误！");
    }
}
然后到网页测试一下：