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,newValue:string)=>{if (labelName === this.userLabel) {this.userName = newValue;} else {this.password = newValue;}}build() {Row() {Column() {inputLabel({labelName:this.userLabel,value:this.userName,callBack:this.inputCallBack})inputLabel({labelName:this.passwordLabel,value:this.password,callBack:this.inputCallBack})Row(){Button('登录').margin({right:30}).onClick(()=>{// 输出用户名和密码console.log(this.userName);console.log(this.password);})Button('重置').onClick(()=>{// 清空用户名和密码this.userName = '';this.password = '';})}}.width('100%')}.height('100%')}
}// 组件构建函数
@Builder function  inputLabel($$:{labelName:string,value:string,callBack:(labelName,newValue)=>void}){Row() {// 输入框前的提示Text($$.labelName).fontSize(30).margin({ right: 20 })TextInput({text:$$.value}).width(200).onChange((newValue:string)=>{// 因为不可以直接更改父组件状态变量的值,所以选择将新的值回调给父组件让其自行更改$$.callBack($$.labelName,newValue)})}.margin({ bottom: 10 })Divider().margin({bottom:10})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2660000.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

创建加密分区或者文件

文章目录 [GParted 中已清除的分区与未格式化的分区](https://superuser.com/questions/706624/cleared-vs-unformatted-partition-in-gparted)创建加密分区解密创建的加密分区以便挂载格式化设备未具体的格式(这里为ext4格式)创建挂载点目录挂载加密的文…

java freemarker 动态生成excel文件

好久木有更新啦 抓住2023的小尾巴 浅浅更新一下吧~ 最近做了一个动态生成excel的功能,这里记录下部分功能,主要用到的是freemarker框架,spring就有带,我起的demo载入了一下freemarker的jar包 一、创建模板 首先可以创建一个e…

三维可视化智慧工地源码,数字孪生可视化大屏,微服务架构+Java+Spring Cloud +UniApp +MySql

源码技术说明 微服务架构JavaSpring Cloud UniApp MySql;支持多端展示(PC端、手机端、平板端);数字孪生可视化大屏,一张图掌握项目整体情况;使用轻量化模型,部署三维可视化管理,与一线生产过程相融合&#…

Leetcode 763 划分字母区间

题意理解: 要把这个字符串划分为尽可能多的片段,同一字母最多出现在一个片段中。 注意,划分结果需要满足:将所有划分结果按顺序连接,得到的字符串仍然是 s 。 返回一个表示每个字符串片段的长度的列表。 输入&#xff…

Seata 中封装了四种分布式事务模式,分别是: AT 模式, TCC 模式, Saga 模式, XA 模式,

文章目录 seata概述Seata 中封装了四种分布式事务模式,分别是:AT 模式,TCC 模式,Saga 模式,XA 模式, 今天我们来聊聊seata seata 概述 在微服务架构下,由于数据库和应用服务的拆分&#xff0c…

echarts 柱状图

记录echarts 柱状图基础案例以及相关配置。 1.基础柱状图 const myChart this.$echarts.init(this.$refs.echartsZx);const option {title: {text: 本周考试记录},//提示框tooltip: {trigger: axis,axisPointer: {type: shadow}},xAxis: {type: category,data: [Mon, Tue, W…

spring、springmvc、springboot、springcloud简介

spring简介 spring是什么? spring: 春天spring: 轻量级的控制反转和面向切面编程的框架 历史 2002年,首次推出spring雏形,interface 21框架2004年,发布1.0版本Rod Johnson: 创始人,悉尼大学,音乐学博士…

配置vite项目打包控制台不显示console.log配置

可以看vite官方的配置文档:构建选项 | Vite 官方中文文档 主要是配置:但是terser需要vite3.0以后手动安装一下 build: {sourcemap: false,minify: terser,terserOptions: {compress: {drop_console: true,drop_debugger: true,},},}, 安装命令&#xff…

八种常见顺序存储的算法

目录 1、线性枚举 1)问题描述 2)动图演示 3)示例说明 4)算法描述 5)源码详解 2、前缀和差分 1)问题描述 2)动图演示 3)样例分析 4)算法描述 5)源码…

攻防世界—no-strings-attached

# 攻防世界—no-strings-attached 介绍下——IDA内置脚本 shiftF12 收获——要一个一个大致看出代码在干嘛 先运行一遍 int __cdecl main(int argc, const char **argv, const char **envp) { setlocale(6, &locale); banner(); prompt_authentication(); authenti…

3D展2D数学原理

今年早些时候,我为 MAKE 杂志写了一篇教程,介绍如何制作视频游戏角色的毛绒动物。 该技术采用给定的角色 3D 模型及其纹理,并以编程方式生成缝纫图案。 虽然我已经编写了一般摘要并将源代码上传到 GitHub,但我在这里编写了对使这一…

vue多条数据渲染(带图片)

我在这用的为接口数据&#xff1a; 先调用接口获取需要的数据: 然后用&#xff1a;data绑定需要渲染的数据&#xff1b;&#xff08;记得包裹在<el-table>标签中&#xff09; 然后以此循环渲染数据&#xff1b;那怎么渲染出来图片呢&#xff1f; 在<el-table-column…

技术资讯:2023编程语言排行榜,出炉啦!

大家好&#xff0c;我是大澈&#xff01; 本文约2000字&#xff0c;整篇阅读大约需要4分钟。 感谢关注微信公众号&#xff1a;“程序员大澈”&#xff0c;免费领取"面试礼包"一份&#xff0c;然后免费加入问答群&#xff0c;从此让解决问题的你不再孤单&#xff01…

PMCW体制雷达系列文章(2) - PMCW雷达与CDM

说明 多发多收(MIMO)体制下关于天线阵列有两个核心的问题&#xff1a;一是天线阵列怎么排布&#xff1b;二是这么多发射通道如何发射。这两点不管对于FMCW雷达还是PMCW雷达都同样适用。关于雷达的发射问题&#xff0c;我之前写过一篇博文&#xff1a;车载毫米波雷达MIMO阵列的天…

python如何读取被压缩的图像

读取压缩的图像数据&#xff1a; PackBits 压缩介绍&#xff1a; CCITT T.3 压缩介绍&#xff1a; 读取压缩的图像数据&#xff1a; 在做图像处理的时候&#xff0c;平时都是使用 函数io.imread() 或者是 函数cv2.imread( ) 函数来读取图像数据&#xff0c;很少用PIL.Image…

什么是 NLP (自然语言处理)

NLP&#xff08;自然语言处理&#xff09;到底是做什么&#xff1f; NLP 的全称是 Natural Language Processing&#xff0c;翻译成中文称作&#xff1a;自然语言处理。它是计算机和人工智能的一个重要领域。顾名思义&#xff0c;该领域研究如何处理自然语言。 自然语言就是我…

java设计模式学习之【迭代器模式】

文章目录 引言迭代器模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用迭代器示例代码地址 引言 想象一下&#xff0c;你在一个书店里浏览各种书籍。你可能会从头到尾查看每一本书&#xff0c;或者可能跳过一些不感兴趣的部分。在这个过程中&#xff0c;你实…

计算机操作系统(OS)——P1操作系统概述

1、操作系统的概念(定义) 1.1、什么是操作系统 __操作系统&#xff08;Operating System&#xff0c;OS&#xff09;&#xff1a;__是指控制和管理整个计算机系统的__硬件和软件__资源&#xff0c;并合理的组织调度计算机的工作和资源的分配&#xff1b;以__提供给用户和其它…

都2023年了还不了解?使用FileZilla搭建信息文件服务器(Windows7)

目录 前言&#xff1a; 一.FileZilla介绍 1.FileZilla介绍 2.FileZilla的优点以及不足 优点 不足 3.FileZilla应用场景 4.FileZilla的主要功能&#xff1a; 二.Windows7搭建FileZilla服务器&#xff0c;并且在本地访问 1.下载 2.FileZIlla安装 服务端安装 新建组 …

基于鸿蒙OS开发一个前端应用

创建JS工程&#xff1a;做鸿蒙应用开发到底学习些啥&#xff1f; 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择File > New > Create Project来创建一个新工程。选择HarmonyOS模板库&#xff0c…