鸿蒙开发系列教程（八）--ArkTS语言：IF-ELSE渲染_ts if else

条件渲染 if/else

@Entry
@Component
struct ViewA1 {
  @State count: number = 0;

  build() {
    Column() {
      Text(`计数=${this.count}`)

      if (this.count ==5) {
        Text(`数字等于5`)
          .fontColor(Color.Green)
      } else {
        Text(`数字不等于5`)
          .fontColor(Color.Red)
      }

      Button('增加')
        .onClick(() => {
          this.count++;
        })

      Button('减少')
        .onClick(() => {
          this.count--;
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

如果数字等于5和不等于5，给出提示

if语句嵌套

@Entry
@Component
struct ViewA1 {
  @State count: number = 0;
  // 设置boolean变量，切换颜色
  @State toggleColor: boolean = false;

  build() {
    Column() {
      Text(`计数=${this.count}`)

      if (this.count >5) {
        if(this.toggleColor){
          Text(`数字大于5`).fontColor(Color.Green).backgroundColor('#ff0000')
        }else{
          Text(`数字大于5`).fontColor(Color.Green)
        }

      } else {
        Text(`数字小于等于5`)
          .fontColor(Color.Red)
      }

      Button('增加')
        .onClick(() => {
          this.count++;
        })

      Button('减少')
        .onClick(() => {
          this.count--;
        })

      Button('切换背景颜色')
        .onClick(() => {
          this.toggleColor = !this.toggleColor;
        })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

计数大于5时，切换背景颜色