基本的双向绑定:您可以使用 @bind
指令将组件的属性与用户界面元素的属性进行绑定。这是一个文本框的例子:
<input type="text" @bind="myValue" />
<p>You entered: @myValue</p>
@code {
private string myValue = "Initial Value";
}
在这个示例中,myValue
字符串与文本框的值双向绑定。当用户更改文本框的值时,myValue
将自动更新,反之亦然。
复杂对象的双向绑定:您也可以在 Blazor 中实现复杂对象的双向绑定,例如表单输入与数据模型。这是一个表单的例子:
<form>
<label for="name">Name:</label>
<input type="text" id="name" @bind="person.Name" />
<label for="age">Age:</label>
<input type="number" id="age" @bind="person.Age" />
<button type="submit">Submit</button>
</form>
<p>Name: @person.Name</p>
<p>Age: @person.Age</p>
@code {
private Person person = new Person();
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
}
在这个示例中,@bind
用于将输入框的值与 person
对象的属性进行双向绑定,以便在表单提交时,person
对象中的属性会更新。
自定义组件中的双向绑定:您还可以在自定义组件中使用双向绑定。这是一个自定义组件的示例:
<!-- ParentComponent.razor -->
<MyCustomComponent @bind-MyValue="parentValue" />
<p>Parent Value: @parentValue</p>
@code {
private string parentValue = "Parent Initial Value";
}
<!-- MyCustomComponent.razor -->
<input type="text" @bind="MyValue" />
@code {
[Parameter]
public string MyValue { get; set; }
}
在这个示例中,@bind-MyValue
用于在父组件中与 MyCustomComponent
组件的属性进行双向绑定。