Blazor-@bind

MaybeHC

发布于 2025-02-02 21:55:34

3700

代码可运行

文章被收录于专栏：技术之路

运行总次数：0

代码可运行

数据绑定

带有 value属性的标记都可以使用@bind 绑定，<div>、<span>等非输入标记，无法使用@bind 指令的，默认绑定了 onchange 事件，onchange 事件是指在输入框中输入内容之后，当失去焦点时执行。

@page "/binddirective"
@rendermode InteractiveAuto
<h3>BindDirective</h3>
<input @bind="strName" />
<p>@strName</p>

@code {
    string strName = "123";
}

我们用一段代码来看看@bind的作用

从运行的动画可以看到，当输入框失去焦点时，会触发onchange事件，改变strName的值

绑定其他事件

@bind的默认绑定事件为onchange，我们可以使用@bind:event=""来绑定其他的事件，这里我们使用oninput事件来试试绑定其他事件是否有效，修改之前的代码，如下：

@page "/binddirective"
@rendermode InteractiveAuto
<h3>BindDirective</h3>
<input @bind="strName" @bind:event="oninput" />
<p>@strName</p>
@code {
    string strName = "123";
}