Blazor-Get&Set

MaybeHC

发布于 2025-02-11 13:37:44

4700

代码可运行

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

运行总次数：0

代码可运行

@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;
        }
    }
}

这段代码可以获得和分别绑定一样的效果

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-02-10，如有侵权请联系 cloudcommunity@tencent.com 删除

get