blazor 数据绑定

1.单向绑定

2.双向绑定

3.组件参数--单向绑定+双向绑定

1.单向绑定

@page "/"

<div>
    单向绑定
    <input value="@Name" />

    值：@Name
</div>
<div>
    双向绑定
    <input @bind-value="@Title" />

    值：@Title
</div>
 

@code{
    public string Name { get; set; } = "aaaaaa";
    public string Title { get; set; } = "bbbbbbbbbb";

    public DateTime Time { get; set; } = DateTime.Now;
}

2.双向绑定

3.组件参数--单向绑定+双向绑定

<input @bind="@_title" />

@code {

    private string _title
    {
        get { return Title; }
        set
        {
            Title = value;
            TitleChanged.InvokeAsync(value);
        }
    }
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public EventCallback<string> TitleChanged { get; set; }
}

@page "/"

<div>
    单向绑定
    <input value="@Name" />

    值：@Name
</div>
<div>
    双向绑定
    <input @bind-value="@Title" />

    值：@Title
</div>
<div>
    组件参数--绑定

    <TestInput @bind-Title="@Title"></TestInput>
    值：@Title
</div>

@code{
    public string Name { get; set; } = "aaaaaa";
    public string Title { get; set; } = "bbbbbbbbbb";
     

    public DateTime Time { get; set; } = DateTime.Now;
}