Blazor-选择&循环语句

今天我们来说说Blazor选择语句和循环语句。
  下面我们以一个简单的例子来讲解相干的语法，我已经创建好了一个Student类，以此类来举行语法的运用

因为我们必要交互性所以我们将类创建在*.client目录下
@ if

我们做一个学生信息的表现，Gender为0时表现男，为1时表现女，我们的代码可以这样写

1. @page "/StudentInfo"
2. @rendermode InteractiveAuto
3. <h3>StudentInfo</h3>
5. <table>
6.     <thead>
7.         <tr>
8.             <th>Name</th>
9.             <th>Age</th>
10.             <th>Gender</th>
11.         </tr>
12.     </thead>
13.     <tbody>
14.         <tr>
15.             <td>@student.Name</td>
16.             <td>@student.Age</td>
17.             @if (student.Gender == 0)
18.             {
19.                 <td>男</td>
20.             }
21.             else
22.             {
23.                 <td>女</td>
24.             }
25.         </tr>
26.     </tbody>
27. </table>
30. @code {
31.     Student student = new Student()
32.         {
33.             Name = "John",
34.             Age = 20,
35.             Gender = 0,
36.         };
37. }

复制代码

看看效果

@ Switch

我们的需求发生了变化，Gender添加了2，当Gender为2时，表现未知。

1. @page "/StudentInfo"
2. @rendermode InteractiveAuto
3. <h3>StudentInfo</h3>
5. <table>
6.     <thead>
7.         <tr>
8.             <th>Name</th>
9.             <th>Age</th>
10.             <th>Gender</th>
11.         </tr>
12.     </thead>
13.     <tbody>
14.         <tr>
15.             <td>@student.Name</td>
16.             <td>@student.Age</td>
17.             @switch(student.Gender){
18.                 case 0:
19.                     {
20.                         <td>男</td>
21.                         break;
22.                     }
23.                 case 1:
24.                     {
25.                         <td>女</td>
26.                         break;
27.                     }
28.                 case 2:
29.                     {
30.                         <td>未知</td>
31.                         break;
32.                     }
34.             }
35.         </tr>
36.     </tbody>
37. </table>
40. @code {
41.     Student student = new Student()
42.         {
43.             Name = "John",
44.             Age = 20,
45.             Gender = 2,
46.         };
47. }

复制代码

效果如下

@ foreach

下面我们有一个list必要表现多个学生信息,@for,@do…while,@while 与foreach类似这里就不在赘述

1. @page "/StudentInfo"
2. @rendermode InteractiveAuto
3. <h3>StudentInfo</h3>
5. <table>
6.     <thead>
7.         <tr>
8.             <th>Name</th>
9.             <th>Age</th>
10.             <th>Gender</th>
11.         </tr>
12.     </thead>
13.     <tbody>
15.         @foreach (var item in list)
16.         {
17.             <tr>
18.                 <td>@item.Name</td>
19.                 <td>@item.Age</td>
20.                 @switch (item.Gender)
21.                 {
22.                     case 0:
23.                         {
24.                             <td>男</td>
25.                             break;
26.                         }
27.                     case 1:
28.                         {
29.                             <td>女</td>
30.                             break;
31.                         }
32.                     case 2:
33.                         {
34.                             <td>未知</td>
35.                             break;
36.                         }
38.                 }
39.             </tr>
40.         }
41.     </tbody>
43. </table>
46. @code {
47.     List<Student> list = new List<Student>();
48.     Student student1 = new Student()
49.         {
50.             Name = "John",
51.             Age = 20,
52.             Gender = 2,
53.         };
54.     Student student2 = new Student()
55.         {
56.             Name = "Sub",
57.             Age = 22,
58.             Gender = 0,
59.         };
60.     protected override void OnInitialized()
61.     {
62.         list.Add(student1);
63.         list.Add(student2);
64.     }
65. }

复制代码

下次我们将继续讲解语法相干的内容，欢迎各人的关注

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。