C# Blazor 学习笔记(9):动态css/class绑定

文章目录

  • 前言
  • 相关资料
  • css和class绑定
    • 直接绑定
    • 间接绑定

前言

之前我们说到,我们组件化有三个目的。

  • 不用写CSS
  • 不用写html
  • 不用写交互逻辑

为了解决第一个目的,我们需要动态css

相关资料

Blazor入手教程(二)css和class绑定

css和class绑定

直接绑定

直接绑定适合参数比较少的时候。建议使用string,因为C#会严格检验参数类型,string可以避免编译问题

<div class="@Class" style=" grid-column-start: span @Span">@ChildContent
</div>@code {[Parameter]public RenderFragment ChildContent { get; set; }[Parameter]public string Span { get; set; } = "12";[Parameter]public string Class{ get; set; } = "Box";}

间接绑定

Blazor可以直接绑定函数返回值,如果是复杂参数,可以直接使用函数的返回值作为参数。我印象中Vue好像是不能直接绑定函数返回值的。


<div class="@GetClass()" style="@ToString()" ></div>@code {private string GetClass(){return isBorder ? "B_Col" : "";}[Parameter]public bool isBorder { get; set; } = false;public int height { get; set; } = 100;public int width { get; set; } = 100;public string color { get; set; } = "#ccc";public string ToString(){//直接使用字符串连接return $"width:{width}px;height:{height}px;background-color:{color}";}
}

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

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

相关文章

Java之Map接口

文章目录 简述Map中key-value特点 Map接口的常用方法Map的主要实现类&#xff1a;HashMapHashMap概述 Map实现类之二&#xff1a;LinkedHashMapMap实现类之三&#xff1a;TreeMapMap实现类之四&#xff1a;Hashtable&#xff08;古老实现类&#xff09;Map实现类之五&#xff1…

AI 3D结构光技术加持,小米引领智能门锁新标准

一直以来&#xff0c;小米智能门锁系列产品让更多家庭走进了安全便捷的智能生活&#xff0c;安全至上的设计让很多家庭都轻松告别了随身钥匙。 7月27日&#xff0c;小米正式推出小米智能门锁M20 Pro&#xff0c;再一次引领智能门锁产品的发展潮流。该款门锁采用AI 3D结构光技术…

请你帮我找一个代码,可以实现相机手眼标定,具体:只需要输入机械臂末端位姿和若干张不同位姿下标定板的照片,输出在相机坐标系下机械臂末端的位置和姿态。

根据我查找到的信息&#xff0c;您可以参考以下资源来实现相机手眼标定&#xff1a; 一个名为handeye-calib-camodocal的项目&#xff0c;它提供了实际代码和标定机器人的说明。您可以在这个 GitHub仓库 中找到源代码和使用方法[1]。 EnsensoSDK的手眼标定指南&#xff0c;它详…

2023软件设计师中级备考经验分享(文中有资料链接分享)

先摊结论吧&#xff0c;软考中级设计师备考只是备考半个月&#xff08;期间还摆烂了几天&#xff09;&#xff0c;然而成绩如下&#xff1a; 我自己都没想到会这么好的成绩。。。 上午题&#xff1a;推荐把软考通APP里的历年真题刷3-4遍&#xff0c;直接刷真题&#xff0c;然后…

关于 Ubuntu 长按 shift 无效, 按 Esc 直接进入 grub 改密码的解决方法

本次长按shift没有反应&#xff0c;直接进入了系统界面&#xff0c;所以改用长按Esc键&#xff0c;步骤如下&#xff1a; 1. 长按esc&#xff0c;进入grub>提示 2.输入grub>normal &#xff0c;回车 3.上一步回车后&#xff0c;继续敲击Esc &#xff0c;出现grub界面 …

无法加载 DLL“xxxx.dll”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E)。

目录 1、DLL引用的问题 1、DLL引用的问题 这两篇文章说的很好&#xff0c;C# DllImport用法和路径问题和无法加载 DLL“xxxx.dll”: 找不到指定的模块 但我折腾了2天&#xff0c;还是没有解决。后来请同事帮忙&#xff0c;发现&#xff0c;服务器上少装东西了…下图的红框这个…

java学习路程之篇四、进阶知识、石头迷阵游戏、绘制界面、打乱石头方块、移动业务、游戏判定胜利、统计步数、重新游戏

文章目录 1、绘制界面2、打乱石头方块3、移动业务4、游戏判定胜利5、统计步数6、重新游戏7、完整代码 1、绘制界面 2、打乱石头方块 3、移动业务 4、游戏判定胜利 5、统计步数 6、重新游戏 7、完整代码 java之石头迷阵单击游戏、继承、接口、窗体、事件、组件、按钮、图片

深度学习——常见注意力机制

1.SENet SENet属于通道注意力机制。2017年提出&#xff0c;是imageNet最后的冠军 SENet采用的方法是对于特征层赋予权值。 重点在于如何赋权 1.将输入信息的所有通道平均池化。 2.平均池化后进行两次全连接&#xff0c;第一次全连接链接的神经元较少&#xff0c;第二次全连…

【HarmonyOS】键盘遮挡输入框时,实现输入框显示在键盘上方

【关键字】 harmonyOS、键盘遮挡input&#xff0c;键盘高度监听 【写在前面】 在使用API6、API7开发HarmonyOS应用时&#xff0c;常出现页面中需要输入input&#xff0c;但是若input位置在页面下方&#xff0c;在input获取焦点的时候&#xff0c;会出现软键盘挡住input情况&a…

数字图像处理-彩色图像处理

文章目录 一、彩色模型1.1RGB彩色模型1.2CMY和CMYK彩色模型1.3HSI彩色模型 二、伪彩色图像处理2.1灰度分层2.2灰度到彩色的变换 三、彩色图像的分割3.1RGB中的彩色图像分割3.2彩色边缘检测 一、彩色模型 1.1RGB彩色模型 RGB空间是生活中最常用的一个模型&#xff0c;电视机、…

手写自定义的spring-boot-start

需求&#xff1a;手写一个加密的spring-boot-start&#xff0c;按着用户定义的加密算法&#xff08;可选&#xff1a;MD5、SHA&#xff09;去加密内容 新建一个maven项目 新建好的项目结构和pom.xml如图 添加pom.xml 完整的pom.xml文件 <?xml version"1.0" …

25.6 matlab里面的10中优化方法介绍——模拟退火算法(matlab程序)

1.简述 相信没有相关物理知识背景的小伙伴看到“退火”二字是一脸懵逼的...固体的退火过程指的是将固体加热至足够高的温度&#xff0c;再使其慢慢冷却的过程。在加热过程中&#xff0c;原本有序排列的内部粒子开始无序运动&#xff0c;此时固体的内能不断增大&#xff1b;而在…

提取高度嵌套的对象里的指定属性?

如何提取高度嵌套的对象里的指定属性&#xff1f; function findKey(data, field) {let finding "";for (const key in data) {if (key field) {finding data[key];}if (typeof data[key] "object") {finding findKey(data[key], field);}if (findin…

大数据面试题:HBase的RegionServer宕机以后怎么恢复的?

面试题来源&#xff1a; 《大数据面试题 V4.0》 大数据面试题V3.0&#xff0c;523道题&#xff0c;679页&#xff0c;46w字 可回答&#xff1a;1&#xff09;HBase一个节点宕机了怎么办&#xff1b;2&#xff09;HBase故障恢复 参考答案&#xff1a; 1、HBase常见故障 导…

服务器磁盘占用过高分析

使用命令 du -sh查看出占用较大的目录&#xff0c;如下&#xff1a; 目录大小处理办法/usr/local/mysql/data16G转移部分文件/usr/local/nacos2.1G维持现状/logs4.4G删除部分文件/var1.9G删除部分文件 du -sh命令使用示例&#xff1a; du -sh /* 查看根目录各文件(夹)占用大小…

SpringMVC学习记录

SpringMVC技术与servlet技术功能等同&#xff0c;均属于web层开发技术 SpringMVC简介 SpringMVC概述 SpringMVC是一种基于Java实现MIVC模型的轻量级web框架 优点 使用简单&#xff0c;开发便捷&#xff08;相比于servlet)灵活性强 SpringMVC是一种表现层框架技术 Spring…

关于PHP性能的优化技巧

网上有无数关于PHP性能的优化技巧&#xff0c;有必要列出一张可供参考使用的清单。 笔者收集的这些技巧来源较广&#xff0c;完整性不能保证。 由于数量较多&#xff0c;这些优化技巧没有经过测试。请各位看官在使用之前自行测试&#xff0c;毕竟这些技巧是否能派上用场&#…

忘记数据库密码如何处理

windows 5.6.51版本及以前 #当前账号设置密码 set password password(123456); #当前账号取消密码 set password ; &#xff08;1&#xff09;用管理员身份打开控制台输入 net stop m5&#xff08;我的电脑MySQL名字为m5&#xff0c;根据自己的更改&#xff09; &#xff08;…

import函数用法

import 是Python中用于导入模块&#xff08;包括标准库、第三方库和自定义模块&#xff09;的关键字。导入模块使得你可以在你的代码中使用模块中定义的函数、类、变量和其他功能&#xff0c;下面是关于import函数用法的详细解释。 本文主要包括以下内容&#xff1a; 1.导入整…

maven下载安装及初次使用相关配置

maven下载按照及初次使用相关配置 一、下载 与安装 下载完解压放在文件夹中即可&#xff01; 依赖Java&#xff0c;需要配置JAVA_HOME设置MAVEN自身的运行环境&#xff0c;需要配置MAVEN_HOME&#xff08;参考安装java&#xff09;测试环境配置结果 MVN测试成功&#xff01…