Blazor数据绑定

数据绑定

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

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

1. @page "/bind"
2. <p>
3.     <input @bind="inputValue"/>
4. </p>
5. <p>
6.     <input @bind="InputValue" @bind:event="oninput" />
7. </p>
8. <ul>
9.     <li>用户输入的:@inputValue</li>
10.     <li>用户输入的@InputValue</li>
11. </ul>
12. @code {
13.     private string? inputValue;
14.     public string? InputValue { get; set; }
15. }

复制代码

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

@bind:event 和@bind的区别

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

格式化数据

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

1. @page "/data-binding"
2. 年月日
3. <input type="date" @bind="startDate" @bind:format="yyyy-MM-dd" />
5. 你选择的年月日 @startDate
6. @code {
7.     private DateTime  startDate = new(2020, 1, 1);
8. }

复制代码

绑定子组件属性

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

• 子组件定义
  

1. <input @bind="Title"/>
3. @code {
4.   [Parameter]
5.   public string Title { get; set; }
6.     [Parameter]
7.   public EventCallback<string> TitleChanged { get; set; }
8. }

复制代码

• 父组件调用
  

1. @page "/bind-theory"
2. <Test @bind-Title="InputValue"/>
3. @code {
4.     public string InputValue { get; set; }
5. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！