⒈ 单向绑定
在razor 模版中, 直接使用 @variable, 其中variable 为 C#属性或类字段, 这样的写法是单向绑定, 即按照C#字段变化后, Dom上的内容也会更新.
@page "/bind" <p>class field @field </p> <p> class property @MyProperty </p> @code{ private int field=100 ; public int MyProperty { get; set; }=1000; }
2. 双向绑定
(1) 对于输入类html组件, 可以实现双向绑定, 但需要加上 @bind 指令.
(2) 如果没有指定要绑定html组件的哪个事件, 默认绑定的事件是失去焦点事件, 指定事件名的写法是 @bind:event
(3) 在使用了 @bind 之后, 我们不应再实现绑定事件代码, 因为 blazor 会自动生成该事件的代码.
(4) @bind 其实是 @bind-value 的缩写形式, 但如果绑定变量写成了 @bind-value, 指定事件名也需要写成 @bind-value:event, 也就是说指定事件名要和绑定变量的写法完全一致, 否则会在编译期或运行时报错.
@page "/bind" <input type="text" @bind="field"> <br/> <input type="text" @bind="MyProperty" @bind:event="oninput"> <input type="text" @bind-value="MyProperty" @bind-value:event="oninput"> @code{ private int field=100 ; public int MyProperty { get; set; }=1000; }
3. 绑定变量的字符格式化
可以使用 @bind:format 指定格式化要求
@page "/bind" <input type="text" @bind="birthday" > <br> <input type="text" @bind="birthday" @bind:format="yyyy-MM-dd"> @code{ private DateTime birthday=DateTime.Today ; }
参考:
Event Handling In Blazor (c-sharpcorner.com) https://www.c-sharpcorner.com/article/event-handling-in-blazor/
原文：https://www.cnblogs.com/harrychinese/p/blazor-bind.html