更改输入框值更改时的标签文本

Question

我将 Blazor 框架与 ASP.NET Core 3.0 一起使用。

我有一个输入框，并在它旁边添加了一个 HTML 标签。当用户在输入框中输入 5 时，标签应显示计算值 5/2。即输入框的值除以2。

在 Blazor 框架中，我不明白如何添加 jQuery。

代码是这样的：

                <div class="col-sm-4">
                    <div class="justify-content-center mb-2">
                        <input type="text" class="form-control form-control-sm border border-secondary" @bind="myModel.CarWeight[index]" />
                    </div>
                </div>
                @if (myModel.AppType == "LC" || myModel.AppType == "LN")
                {
                    decimal calcRes = Convert.ToDecimal(myModel.CarWeight[index]) / 2;
                    
                     <div class="col-sm-4">
                        <div class="justify-content-center mb-2">
                            <label class="col-form-label"><b>calcRes</b></label>
                        </div>
                    </div>
                }

请注意这一行：myModel.CarWeight[index]

加载页面时，它会创建一个 5 行 2 列的条目表单。5个输入框。当用户填写任何输入框时，我希望相应的标签显示计算结果。

Answer 1

您可以更新特定事件的绑定值

@bind：事件=“oninput”

请参阅https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-5.0

你会得到这个非常简单的代码

@page "/"

<input type="number" @bind="inputVal" @bind:event="oninput" />
<label>@(Convert.ToDouble(inputVal)/2)</label>

@code{
    string inputVal = "0";
}