2024-09-11作业

<body>

  <div id="app">
    <div class="wrapper">
      <div class="input-group">
        <span>用户名</span>
        <input type="text" placeholder="请输入用户名" class="username" v-model='username'>
      </div>
      <div class="input-group">
        <span>密码</span>
        <input type="password" placeholder="请输入密码" class="password" v-model='password' 
        @keydown="enter">
      </div>
      <button @click="btn">点击登录</button>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    username = 'abc'
    password = '123'
    new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        btn() {
          if (this.username === '' || this.password === '') {
            alert('用户名或密码不能为空')
          }
          //判断 账号 密码是否正确
          else if (this.username === username && this.password === password) {
            alert('登录成功');
          } else {
            alert('账号或密码错误');
          }
          // 触发点击  内容为空
          this.username = ''
          this.password = ''
        },
        enter(e) {
          if (e.key === "Enter") {
            this.btn()
          }
        }
      }
    }
    )
  </script>
</body>
2024-09-11作业

推荐阅读更多精彩内容
