Blazor：如何有条件地设置元素的样式

在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" /> }

@if（MyNumber>100）
{  }
否则如果（MyNumber<1）
{  }
其他的
{  }

是否有更好的可能性设置带有条件的样式

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

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

@{
    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; }
}

@代码{
公共字典集样式（int myNumber）
{
var dict=新字典（）；
如果（myNumber>100）{}
如果（myNumber<1）添加（“样式”，“颜色：红色”）；
else dict.Add（“样式”，“背景：浅绿色”）；
返回命令；
}

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

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

@{
    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; }
}

@{
字符串样式字符串；
if（MyNumber<1）StyleString=“color:red”；
如果（MyNumber>100）StyleString=“”；
else StyleString=“背景：浅绿色”；
}    
@代码{
int MyNumber{get；set；}
}

有很多方法，我会使用：

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

private string StyleForNumber（int n）
{
如果（n>100）返回“”；
如果（n<1）返回“颜色：红色”；
返回“背景：浅绿色”；
}

该功能可重复使用，易于维护

---

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

我在这里看到了一些习惯。我通常也会制作类字符串，而不是直接样式。：DYeah，我已经混合了它们。清理了。另外，我认为你需要调用方法：

，但我认为你的答案比我的更优雅。是的，

（）

是必需的，它们只是在复制/粘贴过程中迷失了方向。这是正确的答案，但我提出了一个解决方案，使之更容易实现。