HarmonyOS自学-Day3(做个登录功能小案例)

---

文章声明⭐⭐⭐

1. 该文章为我（有编程语言基础，非编程小白）的 HarmonyOS自学笔记，此类文章笔记我会默认大家都学过前端相关的知识
2. 知识来源为 HarmonyOS官方文档，归纳为自己的语言与理解记录于此
3. 不出意外的话，我大抵会 持续更新
4. 想要了解前端开发（技术栈大致有：Vue2/3、微信小程序、uniapp、HarmonyOS、NodeJS、Typescript）与Python的小伙伴，可以关注我！谢谢大家！

---

让我们开始今天的学习吧！

登录功能小案例

样式大致如下：

需求为：

• 实时显示用户输入的用户名和密码
• 使用 @Builder 来封装一行提示标签与输入框
• 点击登录即输出用户名与密码
• 点击重置则清空用户名和密码

代码如下：

@Entry
@Component
struct Index {
   
  // 输入框前的提示
  userLabel:string = '用户名';
  passwordLabel:string = '密码';
  // 用户名和密码的状态变量
  @State userName:string = '';
  @State password:string = '';
  // 输入框为了实现双向绑定而创建的回调函数
  inputCallBack=(labelName:string