vite创建之实践项目

vite创建之实践项目

1、需要修改的代码

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
  
  

4、运行结果

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

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