Blazor-Get&Set

原创已于 2025-08-05 00:28:46 修改 · 486 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#blazor #c#

于 2025-02-10 00:08:59 首次发布

Blazor 专栏收录该内容

38 篇文章

订阅专栏

基本介绍

@bind可以实现双向绑定，有时候我们可能需要处理一些逻辑，这时候我们可以将set和get分开来进行绑定，使用@bind:get 和 @bind:set来实现，进行分别处理。
@bind:get指定要绑定的字段，属性
@bind:set指定给字段，属性设置值的回调，绑定c#方法
与@bind一致，@bind:set也默认使用onchange事件

分别绑定

下面我们通过一段示例来看看具体的用法，我们分别绑定set和get

@page "/injectPage"
@rendermode InteractiveAuto
@inject ILogger<InjectPage> logger;
<h3>InjectPage</h3>
<input @bind:set="SetName" @bind:get="name"></input>
<p>@name</p>
@code {
    string? name = "张三";
    void SetName(string? name){
        this.name = name;
    }    
}

这段代码实现了基本的功能，和@bind的功能是一致的，下面我们添加一些逻辑看看结果如何

@page "/injectPage"
@rendermode InteractiveAuto
@inject ILogger<InjectPage> logger;
<h3>InjectPage</h3>
<input @bind:set="SetName" @bind:get="name"></input>
<p>@name</p>
@code {
    string? name = "张三";
    void SetName(string? name){
        this.name = "姓名："+ name;
    }    
}

我们让每次输入名称后添加“姓名：”的前缀，看看能否实现
在这里插入图片描述

看看效果，功能是可以正常实现的。

绑定属性

我们也可以直接绑定属性，在属性中实现get，set方法

@page "/injectPage"
@rendermode InteractiveAuto
@inject ILogger<InjectPage> logger;
<h3>InjectPage</h3>
<input @bind="Name"></input>
<p>@name</p>
@code {
    string? name = "张三";
    string? Name{
        get{
            return name;
        }
        set{
            this.name = "姓名：" + name;
        }
    }
}