前言

之前我們說到，我們組件化有三個(gè)目的。

• 不用寫CSS
• 不用寫html
• 不用寫交互邏輯

為了解決第一個(gè)目的，我們需要?jiǎng)討B(tài)css

相關(guān)資料

Blazor入手教程（二）css和class綁定

css和class綁定

直接綁定

直接綁定適合參數(shù)比較少的時(shí)候。建議使用string，因?yàn)镃#會(huì)嚴(yán)格檢驗(yàn)參數(shù)類型，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可以直接綁定函數(shù)返回值，如果是復(fù)雜參數(shù)，可以直接使用函數(shù)的返回值作為參數(shù)。我印象中Vue好像是不能直接綁定函數(shù)返回值的。

<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}";}
}