[C#] Blazor练习3 -数据绑定

2022-03-29 19:35:22 浏览数 (2)

默认绑定

1.使用方法

Blazor中Razor组件通过一个名为@bind的HTML元素属性提供数据绑定功能,数据绑定的对象可以为字段、属性或表达式值。例如:

代码语言:javascript复制
<input @bind="slave" />

@bind默认绑定的是元素的onchange事件,通过在组件中添加一个元素p可以看出效果,每当input离开focus或者回车时,p中的值才会更新:

代码语言:javascript复制
<p >ID: @slave</p>

2.等价单向绑定

由于@bind绑定的数据是强类型,在从input的value到绑定的数据时,会做相关的数据转换,如果转换失败,则会保持上次的值不变。也就是说,默认绑定类似于以下代码:

代码语言:javascript复制
<input value="@slave" @onchange="(e) => { slave= int.TryParse(e.Value.ToString(), out var val) ? val : slave;}" />

之所以说是类似,是因为当无法转换时,例如输入的是小数123.1,当触发onchange事件时,通过@bind绑定数据时,input中value会变回上一次的整数;而这种单向绑定时,input的value显示的依然为123.1,不过通过C#获取slave的值时,得到的与通过@bind绑定数据时的行为是一致的。在单向绑定时,即使使用StateHasChanged(),由于渲染引擎未发现状态的变化,依然是不会改变显示的值。

0 人点赞