Blazor-选择循环语句

news2025/1/30 12:38:14

今天我们来说说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);
    }
}

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

appium自动化环境搭建

一、appium介绍 appium介绍 appium是一个开源工具、支持跨平台、用于自动化ios、安卓手机和windows桌面平台上面的原生、移动web和混合应用&#xff0c;支持多种编程语言(python&#xff0c;java&#xff0c;Ruby&#xff0c;Javascript、PHP等) 原生应用和混合应用&#xf…

大数据Hadoop入门2

目录 第三部分&#xff08;Hadoop MapReduce和Hadoop YARN&#xff09; 1.课程内容-大纲-学习目标 2.理解先分再合、分而治之的思想 3.hadoop团队针对MapReduce的设计构思 4.Hadoop MapReduce介绍、阶级划分和进程组成 5.Hadoop MapReduce官方示例-圆周率PI评估 6.Hadoo…

21.Word:小赵-毕业论文排版❗【39】

目录 题目​ NO1.2 NO3.4 NO5.6 NO7.8.9 NO10.11.12 题目 NO1.2 自己的论文当中接收老师的修改&#xff1a;审阅→比较→源文档&#xff1a;考生文件夹&#xff1a;Word.docx→修订的文档&#xff1a;考生文件夹&#xff1a;教师修改→确定→接收→接收所有修订将合并之…

【go语言】并发编程

一、协程、线程、进程 在计算机编程中&#xff0c;进程、线程和协程都是用于并发执行任务的不同概念。他们的区别主要体现在创建、管理和调度的复杂度上&#xff0c;特别是在不同的编程语言中有不同的实现方式。下面是他们的详细区别和在 go 语言中的实现方式。 1.1 进程 定义…

算法1-1 模拟与高精度

目录 一 阶乘数码 二 麦森数 三 模拟题 一 阶乘数码 本题中n<1000,1000的阶乘为以下这么大&#xff0c;远超long的范围 402387260077093773543702433923003985719374864210714632543799910429938512398629020592044208486969404800479988610197196058631666872994808558901…

公式与函数的应用

一 相邻表格相乘 1 也可以复制 打印标题

ShenNiusModularity项目源码学习(7:数据库结构)

ShenNiusModularity项目默认使用mysql数据库&#xff0c;数据库连接字符串放到了ShenNius.Admin. Mvc、ShenNius.Admin.Hosting的appsettings.json文件内。   ShenNiusModularity项目为自媒体内容管理系统&#xff0c;支持常规管理、CMS管理、商城管理等功能&#xff0c;其数…

手撕Diffusion系列 - 第九期 - 改进为Stable Diffusion(原理介绍)

手撕Diffusion系列 - 第九期 - 改进为Stable Diffusion&#xff08;原理介绍&#xff09; 目录 手撕Diffusion系列 - 第九期 - 改进为Stable Diffusion&#xff08;原理介绍&#xff09;DDPM 原理图Stable Diffusion 原理Stable Diffusion的原理解释Stable Diffusion 和 Diffus…

论文笔记(六十三)Understanding Diffusion Models: A Unified Perspective(三)

Understanding Diffusion Models: A Unified Perspective&#xff08;三&#xff09; 文章概括 文章概括 引用&#xff1a; article{luo2022understanding,title{Understanding diffusion models: A unified perspective},author{Luo, Calvin},journal{arXiv preprint arXiv:…

修改maven的编码格式为utf-8

1.maven默认编码为GBK 注:配好MAVEN_HOME的环境变量后,在运行cmd. 打开cmd 运行mvn -v命令即可. 2.修改UTF-8为默认编码. 设置环境变量 变量名 MAVEN_OPTS 变量值 -Xms256m -Xmx512m -Dfile.encodingUTF-8 3.保存,退出cmd.重新打开cmd 运行mvn -v命令即可. 源码获取&…

从AD的原理图自动提取引脚网络的小工具

这里跟大家分享一个我自己写的小软件&#xff0c;实现从AD的原理图里自动找出网络名称和引脚的对应。存成文本方便后续做表格或是使用简单行列编辑生成引脚约束文件&#xff08;如.XDC .UCF .TCL等&#xff09;。 我们在FPGA设计中需要引脚锁定文件&#xff0c;就是指示TOP层…

【数据结构】(1)集合类的认识

一、什么是数据结构 1、数据结构的定义 数据结构就是存储、组织数据的方式&#xff0c;即相互之间存在一种或多种关系的数据元素的集合。 2、学习数据结构的目的 在实际开发中&#xff0c;我们需要使用大量的数据。为了高效地管理这些数据&#xff0c;实现增删改查等操作&…

解决使用Selenium时ChromeDriver版本不匹配问题

在学习Python爬虫过程中如果使用Selenium的时候遇到报错如下session not created: This version of ChromeDriver only supports Chrome version 99… 这说明当前你的chrome驱动版本和浏览器版本不匹配。 例如 SessionNotCreatedException: Message: session not created: This…

CAN波特率匹配

STM32 LinuxIMX6ull&#xff08;Linux&#xff09;基于can-utils测试

JavaScript中的相等运算符:`==`与`===`

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

A7. Jenkins Pipeline自动化构建过程,可灵活配置多项目、多模块服务实战

服务容器化构建的环境配置构建前需要解决什么下面我们带着问题分析构建的过程:1. 如何解决jenkins执行环境与shell脚本执行环境不一致问题?2. 构建之前动态修改项目的环境变量3. 在通过容器打包时避免不了会产生比较多的不可用的镜像资源,这些资源要是不及时删除掉时会导致服…

66-《虞美人》

虞美人 虞美人&#xff08;学名&#xff1a;Papaver rhoeas L.&#xff09;&#xff1a;一年生草本植物&#xff0c;全体被伸展的刚毛&#xff0c;稀无毛。茎直立&#xff0c;高25-90厘米&#xff0c;具分枝。叶片轮廓披针形或狭卵形&#xff0c;羽状分裂&#xff0c;裂片披针形…

obsidian插件——Metadata Hider

原本是要找导出图片时显示属性的插件&#xff0c;奈何还没找到&#xff0c;反而找到了可以隐藏属性的插件。唉&#xff0c;人生不如意&#xff0c;十之八九。 说一下功能&#xff1a; 这个插件可以把obsidian的文档属性放在右侧显示&#xff0c;或者决定只显示具体几项属性&a…

特种作业操作之低压电工考试真题

1.下面&#xff08; &#xff09;属于顺磁性材料。 A. 铜 B. 水 C. 空气 答案&#xff1a;C 2.事故照明一般采用&#xff08; &#xff09;。 A. 日光灯 B. 白炽灯 C. 压汞灯 答案&#xff1a;B 3.人体同时接触带电设备或线路中的两相导体时&#xff0c;电流从一相通过人体流…

[免费]基于Python的Django博客系统【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的基于Python的Django博客系统&#xff0c;分享下哈。 项目视频演示 【免费】基于Python的Django博客系统 Python毕业设计_哔哩哔哩_bilibili 项目介绍 随着互联网技术的飞速发展&#xff0c;信息的传播与…