账号:
v-model是双向数据绑定语法糖
t

<div class="form-group form-inline">
          <label for="username">登录名称</label>
          <input
            type="text"
            class="form-control ml-2"
            id="username"
            placeholder="请输入登录名称"
            autocomplete="off"
            //绑定用户名
            //trim属性:去除两边空格
            v-model.trim="username"
          />
        </div>

密码验证::

 <div class="form-group form-inline">
          <label for="password">登录密码</label>
          <input
            type="password"
            class="form-control ml-2"
            id="password"
            placeholder="请输入登录密码"
            v-model.trim="password"
          />
        </div>

数据流:

data() {
    return {
      username: '',
      password: ''
    }
  },

登录验证:

 login() {
 //自己设置账号 密码
      if (this.username === 'admin' && this.password === '666666') {
        // 登录成功
        // 1. 存储 token
        //                             键,值
        localStorage.setItem('token', 'Bearer xxxx')
        // 2. 跳转到后台主页
        this.$router.push('/home')
      } else {
        // 登录失败,清空
        localStorage.removeItem('token')
      }
    }

token运行情况
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐