【练习】使用DevEco Studio编写计数器案例

效果展示

知识点

类型转换（数字和字符串）

字符串转数字

方法说明例子

Number()

方法	说明	例子
Number()	字符串直接转数字，转换失败返回NaN（字符串包含非数字）	`let str1: string = '1.1' console.log(Number(str1))//1.1let str2: string = '1.9' console.log(Number(str2))//1.9let str3: string = '1.1a' console.log(Number(str3))//NaN`
parseInt()	去掉小数部分转数字，转换失败返回NaN	`let str1: string = '1.1' console.log(parseInt(str1))//1let str2: string = '1.9' console.log(parseInt(str2))//1let str3: string = '1.1a' console.log(parseInt(str3))//1let str4: string = 'a' console.log(parseInt(str4))//NaN`
parseFloat()	保留小数部分转数字，转换失败返回NaN	`let str1: string = '1.1' console.log(parseFloat(str1))//1.1let str2: string = '1.9' console.log(parseFloat(str2))//1.9let str3: string = '1.1a' console.log(parseFloat(str3))//1.1let str4: string = 'a' console.log(parseFloat(str4))//NaN`

字符串直接转数字，转换失败返回NaN（字符串包含非数字）

let str1: string = '1.1'
console.log(Number(str1))//1.1let str2: string = '1.9'
console.log(Number(str2))//1.9let str3: string = '1.1a'
console.log(Number(str3))//NaN

parseInt()

去掉小数部分转数字，转换失败返回NaN

let str1: string = '1.1'
console.log(parseInt(str1))//1let str2: string = '1.9'
console.log(parseInt(str2))//1let str3: string = '1.1a'
console.log(parseInt(str3))//1let str4: string = 'a'
console.log(parseInt(str4))//NaN

parseFloat()

保留小数部分转数字，转换失败返回NaN

let str1: string = '1.1'
console.log(parseFloat(str1))//1.1let str2: string = '1.9'
console.log(parseFloat(str2))//1.9let str3: string = '1.1a'
console.log(parseFloat(str3))//1.1let str4: string = 'a'
console.log(parseFloat(str4))//NaN

数字转字符串

方法说明例子

toString()

方法	说明	例子
toString()	数字直接转字符串	`let num1: number= 1.1 console.log(num1.toString())//'1.1'let num2: number= 1.9 console.log(num2.toString())//'1.9'`
toFixed()	四舍五入转字符串，可设置保留几位小数	`let num1: number= 1.1 console.log(num1.toFixed())//'1'let num2: number= 1.9 console.log(num2.toFixed())//'2'let num2: number= 1.9152 console.log(num2.toFixed(2))//'1.92'`

数字直接转字符串

let num1: number= 1.1
console.log(num1.toString())//'1.1'let num2: number= 1.9
console.log(num2.toString())//'1.9'

toFixed()

四舍五入转字符串，可设置保留几位小数

let num1: number= 1.1
console.log(num1.toFixed())//'1'let num2: number= 1.9
console.log(num2.toFixed())//'2'let num2: number= 1.9152
console.log(num2.toFixed(2))//'1.92'

点击事件

说明：组件 被点击时 触发的事件

作用：监听（感知）用户点击行为，进行对应操作

语法：onClick（（参数）=> {}）

状态管理

普通管理：只能在初始化时渲染，后续将不会再刷新。

状态变量：需要装饰器【@State】装饰，改变会引起UI的渲染刷新（必须设置类型和初始值）

状态管理的基本流程图

注意：定义在组件内普通变量或状态变量，都需要通过this访问

代码展示

@Entry
@Component
struct Index {@State num: number = 1;build() {Row({ space: 10 }) {Button() {Text("-").fontSize(40).lineHeight(50).fontColor("#fff")}.width(50).height(50).onClick(() => {this.num--})Text(this.num.toString()).fontSize(20)Button() {Text("+").fontSize(40).lineHeight(50).fontColor("#fff")}.width(50).height(50).onClick(() => {this.num++})}.padding(10)}
}

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

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