vite创建之实践项目

vite创建之实践项目

1、需要修改的代码

<script>
    // 在这里写vue代码
</script>
<template>
  <transition name="fade">
    <div class="alert"></div>
  </transition>
  <div id="login">
    <div class="form-group">
      <label for="exampleInputUsername">用户名：</label>
      <input
        type="text"
        id="exampleInputUsername"
        placeholder="请输入用户名"
      />
    </div>
    <div class="form-group">
      <label for="exampleInputPassWord">密码：</label>
      <input
        type = " password "
        id="exampleInputPassWord"
        placeholder="请输入密码"
      />
    </div>
    <button type="submit" style="background-color: #9763fe;">登录</button>
  </div>
</template>
<style scoped>
.alert {
  position: absolute;
  width: 290px;
  top: 50px;
  margin: 0 auto;
  padding: 10px 0;
  background: #e76a6a;
  border-radius: 8px;
  opacity: 1;
  text-align: center;
  transition: opacity 0.3s ease;
}
/* 定义名为'fade'的过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.form-group {
  margin-bottom: 1em;
  text-align: left;
}
input {
  outline-style: none;
  border: 1px solid #c0c4cc;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  padding: 0;
  padding: 10px 15px;
  box-sizing: border-box;
  font-family: "Microsoft soft";
  &:focus {
    border-color: #f07b00;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px
            rgba(0, 0, 0, 0.075),
        #f07b00;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
        #f07b00;
  }
}
</style>

2、修改要求

（1）删除HelloWorld.vue,在components下创建 Login.vue,对App.vue里的文件引入进行修改

（2）创建userName和passWord字符串型变量并绑定在用户名、密码上（双向绑定）。

（3）创建message字符串型变量并绑定在class名为alert的div上（文本输出）。

（4）创建msgShow布尔型变量并绑定在class名为alert的 div上（显示控制）。

（5）创建checkLogin方法绑定在登录按钮上并对登录用户的输入进行校验，将相应信息输出给message（输入为空要提示，输错要提示）。

（6）只有当用户输入用户名：studies ，密码：qzzg 时才能正确登录。

3、修改之后的代码

好的，根据您的要求，以下是修改后的Login.vue文件：

html
<template>  
  <div>  
    <transition name="fade">  
      <div class="alert" v-if="msgShow">{{ message }}</div>  
    </transition>  
    <div id="login">  
      <div class="form-group">  
        <label for="exampleInputUsername">用户名：</label>  
        <input  
          type="text"  
          id="exampleInputUsername"  
          v-model="userName"  
          placeholder="请输入用户名"  
        />  
      </div>  
      <div class="form-group">  
        <label for="exampleInputPassWord">密码：</label>  
        <input  
          type="password"  
          id="exampleInputPassWord"  
          v-model="passWord"  
          placeholder="请输入密码"  
        />  
      </div>  
      <button type="button" @click="checkLogin">登录</button>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      userName: '',  
      passWord: '',  
      message: '',  
      msgShow: false, // 显示控制变量  
    };  
  },  
  methods: {  
    checkLogin() {  
      // 验证用户名和密码是否正确  
      if (this.userName === 'studies' && this.passWord === 'qzzg') {  
        this.message = '登录成功！';  
        this.msgShow = true; // 显示成功信息  
      } else {  
        this.message = '用户名或密码错误，请重试。'; // 提示错误信息  
        this.msgShow = true; // 显示错误信息  
      }  
    },  
  },  
};  
</script>

4、运行结果

（1）输入stdiues，密码为qzzg时，会提示登录成功

（2）若输入的密码不是qzzg，会提示用户名或密码输入错误，请重新输入。