HarmonyOS Next星河版笔记--界面开发(5)

1.字符串

1.1.字符串拼接

作用:把两个或多个字符串,拼成一个字符串。(通常是用来拼接字符串和变量)

'hello' + 'world'  =>  'helloworld'

加好作用:拼接

let name:string = '小明'
console.log('简介信息','名字是' + name)
let name:string = '吕布'
let age:number = 18
console.log('简介信息' ,'姓名' + name)
let num1:number = 100
let num2:number = 200
console.log('总数',num1 + num2)

日志页面效果

1.2.模板字符串`hello`

作用:拼接字符串和变量

优势:更适合于多个变量的字符串拼接

let name:string = '吕布'
let age:number = 18
console.log('简介信息',`姓名是${name},今年${age}岁了`)

日志页面效果

2.类型转换(数字和字符串)

2.1.字符串转数字

//字符串转数字
//Number():字符串直接转数字转换失败返回NaN(字符串中包含非数字)
// parseInt():去掉小数部分转数字转换失败返回NaN
// parseFloat():保留小数部分转数字,转换失败返回NaN
let money:string = '1000'
let money2:number = 500
console.log('总工资',Number(money) + money2)//1500

2.2.数字转字符串

作用:字符串用于展示

toString():数字直接转字符串

toFixed():四舍五入转字符串,可设置保留几位小数

3.交互——点击事件

说明:组件被点击是触发的事件

作用:监听感知用户点击行为,进行对应操作

语法:onClick(参数) =>{})

Button('点我,显示弹窗')
.onClink(() =>{
AlertDialog.show({
message:'你好——这里是弹窗'
})
})

4.状态管理

之前构建的页面多为静态界面

但如果希望构建一个动态的、有交互的界面,就需要引入状态的概念

点击交互触发了文本状态变更,状态变更引起了UI渲染

普通变量:只能在初始化时渲染,后续将不会再刷新。

状态变量:需要装饰器装饰,改变会引起UI的渲染刷新(必须设置类型和初始值)

//状态管理
let msg1:string = '青菜'//普通变量@Entry
@Component
struct Index {msg2:string = '黑马'//@State message: string = 'Hello World';//状态变量build() {
Column(){Text(msg1)Text(this.msg2)//this自己的
}}}
//状态管理
let msg1:string = '青菜'//普通变量@Entry
@Component
struct Index {msg2:string = '黑马'//@State message: string = 'Hello World';build() {
Column(){Text(msg1)Text(this.msg2)//this自己的
}}}
//状态管理
//1、普通变量,只能在初始化是渲染,后续就算变化了,也不会引起更新
//2、状态变量,被装饰器修饰,值会改变,会自动引起界面的刷新//组件外的[普通变量]不需要this
let myName:string = '青菜'//普通变量@Entry
@Component
struct Index {//组件内的 [ 普通变量 ] this×××
myAge:number = 18//组件内的状态变量 this×××@State myMsg: string = 'Hello World';//装饰器build() {
Column() {Text(myName).onClick(()=>{
myName = '白菜'//点击无变化console.log('myName',myName)})Text(this.myAge.toString()).onClick(()=>{this.myAge = 20console.log('myAge',this.myAge)})Text(this.myMsg).onClick(()=>{this.myMsg = 'haoyao'})
}}}

5.计数器案例

思路

  1. 准备 状态变量 → @State count:number = 1
  2. 注册点击事件→ onClick
  3. 点击时,修改状态变量
  4. 状态变量变化,界面自动更新
@Entry
@Component
struct Index {//状态变量@State count: number = 1;build() {
Row(){Button('-').onClick(()=>{this.count -= 1})Text(this.count.toString()).padding(20).margin(10)Button('+').onClick(()=>{this.count += 1})
}}

6.点赞案例

思路:

  1. 注册点击事件→onClick
  2. 点击时候,修改颜色,修改数字
    1. 提取颜色为状态变量
    2. 提取数字为状态变量

7.一元、比较、逻辑运算符

7.1.一元运算符

  • 后置写法:先赋值后自增/自减
  • 前置写法:先自增/自减再赋值

7.2.比较运算符

作用:用来判断比较两个数据大小,返回一个布尔值(true/false)

//判断密码是否正确
let password:string = '123456'
let password2 :string = '1234567'
console.log('判断结果',password == password2)//false

7.3.逻辑运算符

作用:扩充判断条件

7.3.运算符优先级

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

24.11.13 机器学习 特征降维(主成份分析) KNN算法 交叉验证(K-Fold) 超参数搜索

导包小总结(不全面): from sklearn.datasets import load_iris from sklearn.model_selection import train_test_split from sklearn.feature_extraction import DictVectorizer(字典数据集的划分) from sklearn.feature_extraction.text import CountVectorizer(特征提取…

基于SpringBoot+RabbitMQ完成应⽤通信

前言: 经过上面俩章学习,我们已经知道Rabbit的使用方式RabbitMQ 七种工作模式介绍_rabbitmq 工作模式-CSDN博客 RabbitMQ的工作队列在Spring Boot中实现(详解常⽤的⼯作模式)-CSDN博客作为⼀个消息队列,RabbitMQ也可以⽤作应⽤程…

react+hook+vite项目使用eletron打包成桌面应用+可以热更新

使用Hooks-Admin的架构 Hooks-Admin: 🚀🚀🚀 Hooks Admin,基于 React18、React-Router V6、React-Hooks、Redux、TypeScript、Vite2、Ant-Design 开源的一套后台管理框架。https://gitee.com/HalseySpicy/Hooks-Adminexe桌面应用…

【C++】string(一)

大家好,我是苏貝,本篇博客带大家了解C的string类,如果你觉得我写的还不错的话,可以给我一个赞👍吗,感谢❤️ 目录 1. 标准库中的string类1.1 string类(了解)1.2 string类的常用接口说明(A) string类对象的…

新版Apache tomcat服务安装 Mac+Window双环境(笔记)

简介:Tomcat服务器器的下载和安装: 安装前提 1)电脑需要有java环境,jdk8以上,否则启动不不成功 2)已经安装Sublime⽂文件编辑软件 3)window电脑需要显示⽂文件拓拓展名 官网(https:…

see的本质是什么?

see的本质是什么?see的本质,就是一条蛇: see s蛇 e眼 e眼 ee是两只大眼睛,长在蛇的脑袋上,代表着蛇头和跟随性观察。 如果你喜欢看【龙虎斗】,看【猫蛇大战】相关的视频,你会发现&#xff0c…

0x00基础算法 -- 0x05 排序

1、离散化 排序算法的第一个应用:离散化。 “离散化”就是把无穷大(无限)的集合中的若干个(有限)元素映射为有限集合以便于统计的方法。 例如:问题的范围定义在整数集合,但是只涉及其中m个有限的…

深度学习在边缘检测中的应用及代码分析

摘要: 本文深入探讨了深度学习在边缘检测领域的应用。首先介绍了边缘检测的基本概念和传统方法的局限性,然后详细阐述了基于深度学习的边缘检测模型,包括其网络结构、训练方法和优势。文中分析了不同的深度学习架构在边缘检测中的性能表现&am…

博物馆实景复刻:开启沉浸式文化体验的新篇章

随着数字化技术的飞速发展,博物馆的展览形式正在经历一场前所未有的变革。3数字博物馆和3D线上展览,这种创新的展览方式不仅打破了时间和空间的限制,更让文化遗产的保护与传承迈上了一个新的台阶。 本文将深入探讨博物馆实景复刻虚拟展厅的兴…

服务器上安装Orcale数据库以及PL SQL工具(中文)

一、前期准备 1、oracle数据库安装包–>Oracle下载地址,版本根据当时情况就下最新的就行,下载时间可能有点长,耐心点。 2、PL SQL工具下载地址–>PL SQL下载地址,百度网盘可以共享【限速,没办法!&am…

除了 TON, 哪些公链在争夺 Telegram 用户?数据表现如何?

作者:Stella L (stellafootprint.network) 在 2024 年,区块链游戏大规模采用迎来了一个意想不到的催化剂:Telegram。随着各大公链争相布局这个拥有海量用户基础的即时通讯平台,一个核心问题浮出水面:这种用户获取策略…

JSON.stringify的应用说明

前言 JSON.stringify() 方法将 JavaScript 对象转换为字符串,在日常开发中较常用,但JSON.stringify其实有三个参数,后两个参数,使用较少,今天来介绍一下后两个参数的使用场景和示例。 语法及参数说明 JSON.stringify()&#xf…

java:接口,抽象,多态的综合小练习

package 综合抽象接口练习;public class person {protected String name;protected int age;person(){}person(String name,int age){this.namename;this.ageage;}public void setName(String name){this.namename;}public String getName(){return name;}public void setAge(i…

<AI 学习> 下载 Stable Diffusions via Windows OS

注意: 不能使用 网络路径 不再支持 HTTPS 登录,需要 Token 1. 获得合法的授权 Stability AI License — Stability AI 上面的链接打开,去申请 许可 2. 拥有 HuggingFace 账号 注册:https://huggingface.co/ 3. 配置 Tok…

【Visual Studio】设置文件目录

打开属性 输出目录:$(SolutionDir)bin\$(Platform)\$(Cinfiguration)\ 中间目录:$(SolutionDir)bin\intermediates\$(Platform)\$(Cinfiguration)\

linux病毒编写+vim shell编程

学习视频来自B站UP主泷羽sec,如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 请一定遵循《网络空间安全法》!!! Linux目录介绍 /bin 二进制可执行文件(kali里面是工具一些文件)/etc 系统的管理和配置文…

Hadoop 学习心得

一、引言 (一)学习 Hadoop 的背景和目的 随着信息技术的飞速发展,数据量呈爆炸式增长,传统的数据处理方式已难以满足需求。在这样的背景下,为了能够在大数据领域有所发展,我开始学习 Hadoop。Hadoop 作为处…

机器学习-35-提取时间序列信号的特征

文章目录 1 特征提取方法1.1 特征提取过程1.2 两类特征提取方法2 基于数据驱动的方法2.1 领域特定特征提取2.2 基于频率的特征提取2.2.1 模拟信号2.2.2 傅里叶变换2.2.3 抽取最大幅值对应特征2.2.4 抽取峰值幅值对应特征2.3 基于统计的特征提取2.4 基于时间的特征提取3 参考附录…

聊天服务器(9)一对一聊天功能

目录 一对一聊天离线消息服务器异常处理 一对一聊天 先新添一个消息码 在业务层增加该业务 没有绑定事件处理器的话消息会派发不出去 聊天其实是服务器做一个中转 现在同时登录两个账号 收到了聊天信息 再回复一下 离线消息 声明中提供接口和方法 张三对离线的李…

【CICD】CICD 持续集成与持续交付在测试中的应用

一、什么是CICD? CI/CD 是指持续集成(Continuous Integration)和持续部署(Continuous Deployment)或持续交付(Continuous Delivery) 1.1 持续集成(Continuous Integration&#xf…