在 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" /> }
Run Code Online (Sandbox Code Playgroud)
是否有更好的可能性来设置带有条件的样式?
编辑: 感谢您的回答,肯定有几种可能的解决方案。我什至使用以下属性找到了另一个:
<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;
}
Run Code Online (Sandbox Code Playgroud)