• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 条件渲染
2
3使用if/else进行条件渲染。
4
5
6> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
7> - if条件语句可以使用状态变量。
8>
9> - 使用if可以使子组件的渲染依赖条件语句。
10>
11> - 必须在容器组件内使用。
12>
13> - 某些容器组件限制子组件的类型或数量。将if放置在这些组件内时,这些限制将应用于if和else语句内创建的组件。例如,Grid组件的子组件仅支持GridItem组件,在Grid组件内使用if时,则if条件语句内仅允许使用GridItem组件。
14
15
16## 示例
17
18使用if条件语句:
19
20```
21Column() {
22    if (this.count > 0) {
23        Text('count is positive')
24    }
25}
26```
27
28
29使用if、else if、else条件语句:
30
31
32```
33Column() {
34    if (this.count < 0) {
35        Text('count is negative')
36    } else if (this.count % 2 === 0) {
37        Divider()
38        Text('even')
39    } else {
40        Divider()
41        Text('odd')
42    }
43}
44```
45