C# Blazor 学习笔记(9):动态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}";}
}