Blazor-多属性赋值

MaybeHC

发布于 2025-02-18 10:59:17

3500

代码可运行

文章被收录于专栏：技术之路

运行总次数：0

代码可运行

我们可以使用@attributes标签对多属性值赋值进行简化，通过一个字典直接进行赋值，这个功能毕竟简单，我们直接用代码来做示例。

不使用@attributes的多赋值

@page "/demoPage"
@rendermode InteractiveAuto
<h3>DemoPage</h3>
<form>
    <div>
        <label>姓名</label>
        <input placeholder=@placeholder
               class=@classStr
               style=@style/>
    </div>
</form>

@code {
    private string style = "width:300px";
    private string classStr = "form-control";
    private string placeholder = "请输入姓名";
}

效果如下：

使用@attributes的多赋值

@page "/demoPage"
@rendermode InteractiveAuto
<h3>DemoPage</h3>
<form>
    <div>
        <label>姓名</label>
        <input @attributes=@attributes/>
    </div>
</form>

@code {
    private Dictionary<string, object> attributes = new(){
        {"style","width:300px" },
        {"class","form-control" },
        {"placeholder","请输入姓名" },
    };
}

效果如下：