Blazor数据绑定

2022-06-21 23:06:12 阅读：174 来源： 互联网

标签：set bind 绑定 code 组件 Blazor 数据 public

数据绑定

Blazor支持在html元素中使用Razor语法进行绑定c#字段属性或值

绑定语法

在html标签中，添加@bind="xxxx"即可实现绑定

@page "/bind"
<p>
    <input @bind="inputValue"/>
</p>
<p>
    <input @bind="InputValue" @bind:event="oninput" />
</p>
<ul>
    <li><code>用户输入的</code>:@inputValue</li>
    <li><code>用户输入的</code>@InputValue</li>
</ul>
@code {
    private string? inputValue;
    public string? InputValue { get; set; }
}

上面的代码实现了当输入完成后鼠标离开input输入框会触发绑定事件

@bind:event 和@bind的区别

@bind 绑定更新不是实时的只有鼠标离开输入框后才会触发
@bind:event 会实时更新数据

格式化数据

blazor目前只支持DateTime格式字符串通过@bind:format="yyyy-MM-dd"

@page "/data-binding"
<code>年月日</code> 
<input type="date" @bind="startDate" @bind:format="yyyy-MM-dd" />

<code>你选择的年月日 @startDate</code>
@code {
    private DateTime  startDate = new(2020, 1, 1);
}

绑定子组件属性

一个父界面往往由多个子组件组成需要父组件参数绑定到子组件当中

子组件定义

<input @bind="Title"/>

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

父组件调用

@page "/bind-theory"
<Test @bind-Title="InputValue"/>
@code {
    public string InputValue { get; set; }
}

标签：set,bind,绑定,code,组件,Blazor,数据,public
来源： https://www.cnblogs.com/zhaofuhao/p/16398684.html