Blazor:如何有条件地设计元素的样式

Question

在Blazor中，我确实想用条件来设置输入元素的样式。这是我现在使用的代码，它是有效的，但后来我遇到了一个问题，因为这里使用了三个不同的输入元素。

@if (MyNumber > 100) 
{ <input type="number" @bind=MyNumber @bind:event="oninput" /> }
else if (MyNumber < 1)
{ <input type="number" @bind=MyNumber @bind:event="oninput" style="color:red" /> }
else
{ <input type="number" @bind=MyNumber @bind:event="oninput" style="background:lightgreen" /> }

有没有更好的可能性设置一个条件的样式？

编辑：感谢您的回答，肯定有几种解决方案。我甚至找到了另一个使用属性的：

<input type="number" @bind=MyNumber @bind:event="oninput" @attributes="SetStyle(MyNumber)" />
@code{
public Dictionary<string, object> SetStyle(int myNumber)
{
var dict = new Dictionary<string, object>();
if (myNumber > 100) { }
else if (myNumber < 1) dict.Add("style", "color:red");
else dict.Add("style", "background:lightgreen");
return dict;
}

Answer 1

有很多方法可以做到这一点，我会使用：

<input style="@StyleForNumber(MyNumber)" type="number" @bind=MyNumber @bind:event="oninput" />

private string StyleForNumber(int n)
{
if (n > 100) return "";
if (n < 1)  return "color:red";
return "background:lightgreen";
}

该功能可以重复使用并且易于维护。

不过，我可能会使用Css类而不是直接样式。

Answer 2

您几乎可以在标记中的任何位置放置变量，其中包括样式或类属性：

@{
string StyleString;
if (MyNumber < 1) StyleString = "color:red";
else if (MyNumber > 100) StyleString = "";
else StyleString = "background: lightgreen";
}    
<input type="number" @bind=MyNumber @bind:event="oninput" style="@StyleString" />
@code {
int MyNumber { get; set; }
}