Blazor-@bind

原创

已于 2025-01-30 21:59:03 修改 · 577 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#blazor #c#

于 2025-01-30 21:58:29 首次发布

数据绑定

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

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

@code

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

code-Study

关注关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Blazor自定义Input使用bind-Value问题

knownchen的专栏

04-23

1388

Blazor自定义Input使用@bind-Value，必须要定义ValueChanged属性 public class MyInput : ComponentBase { [Parameter] public string Value { get; set; } [Parameter] public EventCallback<string> ValueChanged { get; set; } }

Blazor —— 让自定义组件也能拥有双向绑定功能

不忘初心

04-10

4784

前言内置的 Input 控件是一个双向绑定控件，我们使用 @bind-Value 就可以对文本框的 Value 进行双向绑定的实现。那我们可以自定义这种双向绑定组件吗？当然可以。示例场景很简单的需求，当点击按钮后，显示选择的水果名称。这个是水果按钮组的代码： <div class="btn-group"> @foreach (var item in Fruits) ...

参与评论您还未登录，请先登录后发表或查看评论

Blazor中bind指令的使用

六十五号腕

07-22

4052

在上一篇中, 第一次用到了@bind指令，她主要用来做数据绑定，有以下几种使用方式： @bind @bind:event @bind-{参数名或属性名} @bind-{参数名或属性名}:event bind是区分大小写的，所以只能用小写的bind，不能用BIND等其他形式具体怎么用？我们一个一个看。 1. @bind @bind主要用来实现双向绑定，比如如下代码： <h3>Page:Bind Sample</h3> 双向：<input type="text" @bin

ASP.NET Core Blazor数据绑定2@bind与@bind-Value

bdbox

02-27

1408

bind将表达式的当前值与 value 特性关联，并使用注册的处理程序处理更改。这个针对的是一般的html组件。@bind-Value针对的是一般的Blazor内置的组件，要结合。

深入浅出Blazor webassembly之数据绑定写法

诸葛建站

08-22

510

⒈ 单向绑定在razor 模版中, 直接使用 @variable, 其中variable 为 C#属性或类字段, 这样的写法是单向绑定, 即按照C#字段变化后, DOM上的内容也会更新. @page "/bind" <p>class field @field </p> <p> class property @MyProperty </p> &...

Blazor学习之旅(5)数据绑定

dotNET跨平台

10-17

1384

【Blazor】|总结/Edison Zhou大家好，我是Edison。最近在学习Blazor做全栈开发，因此根据老习惯，我会将我的学习过程记录下来，一来体系化整理，二来作为笔记供将来翻看。本篇，我们来了解下在Blazor中数据是如何绑定的。关于数据绑定如果希望 HTML 元素显示值，可以编写代码来更改显示内容。如果值发生更改，则需要编写额外的代码以更新显示内容。在 Blazor 中，可以使用数...

blazor-bind-data-grid-to-data-asynchronously-20.1.6+-源码.rar

10-10

在这个"blazor-bind-data-grid-to-data-asynchronously-20.1.6+-源码.rar"压缩包中，包含的是一个关于如何在Blazor应用中异步绑定数据到数据网格的源代码示例。这个版本可能指的是Blazor框架的20.1.6+版本。在...

Blazor @bind 和 @bind-value 区别

06-10

Blazor中的@bind和@bind-value都是用于双向绑定数据的指令，但它们的使用方式略有不同。 @bind指令可以用于绑定一个组件的属性和一个模型中的属性，例如： ``` <input type="text" @bind="Name" /> ``` 在这个...

blazor-nouislider：Blazor中noUiSlider的包装

02-17

`@bind-Value`属性将滑块的值绑定到`sliderValue`变量，以便在用户调整滑块时更新这个值。 Blazor-nouiSlider还支持其他高级特性，如滑块分段、滑动事件监听、动态更新滑块配置等。此外，由于它基于noUiSlider，...

精选资源

blazor-webassembly-sample

05-12

- `@State`属性用于管理组件状态，`@bind`用于双向数据绑定。 - 路由（Routing）通过`<NavLink>`和`@page`指令实现，方便导航和URL管理。 7. 依赖注入（Dependency Injection, DI）： - Blazor支持依赖注入，...

Blazor双向绑定

℡メ㏑╭ァ小凯

09-18

675

您也可以在 Blazor 中实现复杂对象的双向绑定，例如表单输入与数据模型。指令将组件的属性与用户界面元素的属性进行绑定。：您还可以在自定义组件中使用双向绑定。字符串与文本框的值双向绑定。当用户更改文本框的值时，对象的属性进行双向绑定，以便在表单提交时，组件的属性进行双向绑定。将自动更新，反之亦然。对象中的属性会更新。

v-bind与v-bind：value的区别

weixin_44724060的博客

04-24

3787

v-bind=“object.value”  v-bind：value=“value” 这是v-bind的两种使用方式，使用时最好不要颠倒，其中v-bind=绑定的不是对象时，运行时会报错，v-bind：value=绑定的是对象时，运行没问题，但如果该处html被重写下（比如下拉搜索框中的input值）...

mnjjjhj

2401_85379304的博客

06-04

471

InputText`组件的`@bind-Value`属性不允许直接绑定非字符串类型的值。通过这种方式，当你在表格中编辑工卡号时，`context.JobNum`会更新为新的值，并且如果工卡号包含`-r`，`context.IsRework`字段将自动更新为`true`。2. **ValueChanged事件**: 使用`ValueChanged`事件处理程序来获取新的值，并更新`context.JobNum`。1. **Value属性**: 使用`Value`属性绑定`context.JobNum`。

vue-property-decorator 使用学习

VirgoYellow 的专栏

11-29

1343

一、安装与使用一般的，vue 项目中使用 TypeScript 时，会安装 vue-property-decorator 这个库，使用装饰器简化书写。安装： npm i -S vue-property-decorator 使用： // 当在vue单文件中使用TypeScript时,引入vue-property-decorator之后,script中的标签就变为这样 <script lang="ts"> // 按需引入自己需要的功能模块 import { Component, Vue }

ASP.NET Core Blazor Webassembly 之数据绑定

dotNET跨平台

08-26

691

Blazor 数据绑定开发指南

farway000的博客

07-07

1043

翻译自 Waqas Anwar 2021年3月21日的文章《A Developer’s Guide to Blazor Data Binding》[1]现如今，大多数 Web 应用程序要么是在页面上显示某种数据，要么是使用表单从用户那里收集数据。这意味着每个 SPA 框架都必须支持数据绑定，以便开发者可以将数据与label、form控件等元素进行绑定。Blazor...

Blazor —— 前端框架的特色功能，数据绑定！！

不忘初心

03-31

6478

前言我相信你已经掌握了Blazor的基本知识和概念，大致知道了它的一个工作原理。再次强调一下，Blazor 是一门 “基于C#语言的前端技术”。因此，它的数据绑定也是基于实体的。场景应用当文本框输入值时，文本框下面的文本会跟着一起变化。 ...

Vue中v-model和v-bind:value的区别