Blazor-选择循环语句

今天我们来说说Blazor选择语句和循环语句。

下面我们以一个简单的例子来讲解相关的语法,我已经创建好了一个Student类,以此类来进行语法的运用
在这里插入图片描述

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

@ if

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

@page "/StudentInfo"
@rendermode InteractiveAuto
<h3>StudentInfo</h3>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@student.Name</td>
            <td>@student.Age</td>
            @if (student.Gender == 0)
            {
                <td></td>
            }
            else
            {
                <td></td>
            }
        </tr>
    </tbody>
</table>


@code {
    Student student = new Student()
        {
            Name = "John",
            Age = 20,
            Gender = 0,
        };
}

看看效果

在这里插入图片描述

@ Switch

我们的需求发生了变化,Gender添加了2,当Gender为2时,显示未知。

@page "/StudentInfo"
@rendermode InteractiveAuto
<h3>StudentInfo</h3>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@student.Name</td>
            <td>@student.Age</td>
            @switch(student.Gender){
                case 0:
                    {
                        <td></td>
                        break;
                    }
                case 1:
                    {
                        <td></td>
                        break;
                    }
                case 2:
                    {
                        <td>未知</td>
                        break;
                    }

            }
        </tr>
    </tbody>
</table>


@code {
    Student student = new Student()
        {
            Name = "John",
            Age = 20,
            Gender = 2,
        };
}

效果如下
在这里插入图片描述

@ foreach

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

@page "/StudentInfo"
@rendermode InteractiveAuto
<h3>StudentInfo</h3>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
        </tr>
    </thead>
    <tbody>

        @foreach (var item in list)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.Age</td>
                @switch (item.Gender)
                {
                    case 0:
                        {
                            <td></td>
                            break;
                        }
                    case 1:
                        {
                            <td></td>
                            break;
                        }
                    case 2:
                        {
                            <td>未知</td>
                            break;
                        }

                }
            </tr>
        }
    </tbody>

</table>


@code {
    List<Student> list = new List<Student>();
    Student student1 = new Student()
        {
            Name = "John",
            Age = 20,
            Gender = 2,
        };
    Student student2 = new Student()
        {
            Name = "Sub",
            Age = 22,
            Gender = 0,
        };
    protected override void OnInitialized()
    {
        list.Add(student1);
        list.Add(student2);
    }
}

在这里插入图片描述
下次我们将继续讲解语法相关的内容,欢迎大家的关注

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

高速光模块中的并行光学和WDM波分光学技术

随着AI大模型训练和推理对计算能力的需求呈指数级增长&#xff0c;AI数据中心的网络带宽需求大幅提升&#xff0c;推动了高速光模块的发展。光模块作为数据中心和高性能计算系统中的关键器件&#xff0c;主要用于提供高速和大容量的数据传输服务。 光模块提升带宽的方法有两种…

RNN实现阿尔茨海默症的诊断识别

本文为为&#x1f517;365天深度学习训练营内部文章 原作者&#xff1a;K同学啊 一 导入数据 import torch.nn as nn import torch.nn.functional as F import torchvision,torch from sklearn.preprocessing import StandardScaler from torch.utils.data import TensorDatase…

RabbitMQ---面试题

常见面试题 1.MQ的作用及应用场景 类似问题&#xff1a;项目什么情况下用到了MQ&#xff0c;为什么要用MQ MQ的主要应用场景&#xff0c;消息队列的应用场景&#xff0c;为什么说消息队列可以削峰 首先MQ是一种用来接收和转发消息的队列&#xff0c;常见的应用常见如下&…

全球AI模型百科全书,亚马逊云科技Bedrock上的100多款AI模型

今天小李哥给大家介绍的是亚马逊云科技上的AI模型管理平台Amazon Bedrock上的Marketplace&#xff0c;这是亚马逊云科技在今年re:Invent发布的一个全新功能&#xff0c;将亚马逊的电商基因带到了其云计算平台&#xff0c;让我们能够通过Amazon Bedrock访问100多种流行、新兴和专…

八种排序算法【C语言实现】

系列文章目录 &#x1f388; &#x1f388; 我的CSDN主页:OTWOL的主页&#xff0c;欢迎&#xff01;&#xff01;&#xff01;&#x1f44b;&#x1f3fc;&#x1f44b;&#x1f3fc; &#x1f389;&#x1f389;我的C语言初阶合集&#xff1a;C语言初阶合集&#xff0c;希望能…

在 vscode + cmake + GNU 工具链的基础上配置 JLINK

安装 JLINK JLINK 官网链接 下载安装后找到安装路径下的可执行文件 将此路径添加到环境变量的 Path 中。 创建 JFlash 项目 打开 JFlash&#xff0c;选择新建项目 选择单片机型号 在弹出的窗口中搜索单片机 其他参数根据实际情况填写 新建完成&#xff1a; 接下来设置…

PyQt5之QtDesigner的若干配置和使用

1.描述 QtDesigner是一个可视化工具&#xff0c;可以通过该工具设计页面 2.简单使用 1.下载PyQt5-tools pip install pyqt5-tools 2.打开designer.exe文件 我采用的是虚拟环境&#xff0c;该文件位于C:\Users\24715\anaconda3\envs\pyqt\Lib\site-packages\qt5_applicatio…

【高项】6.3 排列活动顺序 ITTO

输入 项目管理计划组件&#xff1a; ① 进度管理计划&#xff1b;② 范围基准 项目文件&#xff1a; ① 假设日志&#xff1b;② 活动属性&#xff1b;③ 活动清单&#xff1b;④ 里程碑清单 工具与技术 紧前关系绘图法&#xff08;PDM&#xff09; ① 完成到开始&…

Elasticsearch 自定义分成器 拼音搜索 搜索自动补全 Java对接

介绍 通常用于将文档中的文本数据拆分成易于索引的词项&#xff08;tokens&#xff09;。有时&#xff0c;默认的分词器无法满足特定应用需求&#xff0c;这时就可以创建 自定义分词器 来实现定制化的文本分析。 自定义分词器组成 Char Filters&#xff08;字符过滤器&#x…

Leecode刷题C语言之完成所有交易的初始最少钱数

执行结果:通过 执行用时和内存消耗如下&#xff1a; long long minimumMoney(int** transactions, int transactionsSize,int* transactionsColSize) {long long total_lose 0;int res 0;for (int i 0; i < transactionsSize; i) {int cost transactions[i][0];int cas…

案例研究丨浪潮云洲通过DataEase推进多维度数据可视化建设

浪潮云洲工业互联网有限公司&#xff08;以下简称为“浪潮云洲”&#xff09;成立于2018年&#xff0c;定位于工业数字基础设施建设商、具有国际影响力的工业互联网平台运营商、生产性互联网头部服务商。截至目前&#xff0c;浪潮云洲工业互联网平台连续五年入选跨行业跨领域工…

C++——动态管理

目录 一、C/C内存分布二、C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free三、C内存管理方式3.1 new/delete操作内置类型3.2 new和delete操作自定义类型 四、operator new与operator delete函数4.1 operator new与operator delete函数 五、new和delete的实现原…

three.js+WebGL踩坑经验合集(4.1):THREE.Line2的射线检测问题(注意本篇说的是Line2,同样也不是阈值方面的问题)

上篇大家消化得如何了&#xff1f; 笔者说过&#xff0c;1级编号不同的两篇博文相对独立&#xff0c;所以这里笔者还是先给出完整代码&#xff0c;哪怕跟&#xff08;3&#xff09;没有太大区别。 这里我们把线的粗细调成5&#xff08;排除难选中的因素&#xff09;&#xff…

Vue2下篇

插槽&#xff1a; 基本插槽&#xff1a; 普通插槽&#xff1a;父组件向子组件传递静态内容。基本插槽只能有一个slot标签&#xff0c;因为这个是默认的位置&#xff0c;所以只能有一个 <!-- ParentComponent.vue --> <template> <ChildComponent> <p>…

【Unity3D】aab包太大无法上传Google问题

目录 一、勾选Split Application Binary&#xff0c;Unity直接打aab包 勾选Split Application Binary选项的影响 不勾选Split Application Binary选项的影响 总结 2、导出Android工程打包aab 一、勾选Split Application Binary&#xff0c;Unity直接打aab包 超出150MB部分…

第6章 数据结构—列表与列表项讲解--总结

整理 野火 《FreeRTOS 内核实现与应用开发实战指南》—基于野火 STM32 全系列&#xff08;M3/4/7&#xff09;开发板 文章目录 第6章 数据结构—列表与列表项讲解--总结6.1 C 语言链表简介6.1.1 单向链表6.1.2 双向链表6.1.3 链表与数组的对比 6.2 FreeRTOS 中链表的实现6.2.1 …

强化学习-Deep Q Network

文章目录 Deep Q Networkzip(*batch)的内部实现假设&#xff1a;结果&#xff1a; Deep Q Network 这种方式很适合格子游戏。因为格子游戏中的每一个格子就是一个状态&#xff0c;这是离散的&#xff0c;但在现实生活中&#xff0c;很多状态并不是离散而是连续的。所以我们可以…

C语言-构造数据类型

1、构造数据类型 结构体、共用体、枚举。 2、结构体 1、结构体的定义 结构体是一个自定义的复合数据类型&#xff0c;它允许将不同类型的数据组合在一起。 struct 结构体名 {数据类型1 成员变量1;数据类型2 成员变量2;数据类型3 成员变量3;数据类型4 成员变量4; } 2、结构体变…

FPGA实现任意角度视频旋转(二)视频90度/270度无裁剪旋转

本文主要介绍如何基于FPGA实现视频的90度/270度无裁剪旋转&#xff0c;旋转效果示意图如下&#xff1a; 为了实时对比旋转效果&#xff0c;采用分屏显示进行处理&#xff0c;左边代表旋转前的视频在屏幕中的位置&#xff0c;右边代表旋转后的视频在屏幕中的位置。 分屏显示的…

Spark/Kafka

文章目录 项目地址一、Spark1. RDD1.1 五大核心属性1.2 执行原理1.3 四种创建方式二、Kafka2.1 生产者(1)分区器(2)生产者提高吞吐量(3) 生产者数据可靠性数据传递语义幂等性和事务数据有序2.2 Broker(1)Broker工作流程(2)节点服役和退役2.3 副本(1)Follower故障细…