当前位置: 首页 > article >正文

Blazor-@bind

数据绑定

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

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

@code {
    string strName = "123";
}

我们用一段代码来看看@bind的作用
在这里插入图片描述
在这里插入图片描述
从运行的动画可以看到,当输入框失去焦点时,会触发onchange事件,改变strName的值

绑定其他事件

@bind的默认绑定事件为onchange,我们可以使用@bind:event=""来绑定其他的事件,这里我们使用oninput事件来试试绑定其他事件是否有效,修改之前的代码,如下:

@page "/binddirective"
@rendermode InteractiveAuto
<h3>BindDirective</h3>
<input @bind="strName" @bind:event="oninput" />
<p>@strName</p>
@code {
    string strName = "123";
}

在这里插入图片描述

我们可以看到,当我们修改了绑定的事件后,变量不会等到焦点失去后才进行更新,而是实时进行更新。


http://www.kler.cn/a/525898.html

相关文章:

  • 安卓(android)读取手机通讯录【Android移动开发基础案例教程(第2版)黑马程序员】
  • Origami Agents:AI驱动的销售研究工具,助力B2B销售团队高效增长
  • 青少年编程与数学 02-008 Pyhon语言编程基础 07课题、数字
  • JVM栈溢出线上环境排查
  • JavaScript_02 表单
  • ORA-04031 错误
  • Qt之数据库的使用一
  • 报错:MC1000未知的生成错误Invalid number of sections declared in PE header
  • react中如何实现组件通信
  • AI编程风潮下的生产力革命:从 Copilot 到 Trae
  • Java-多态(详解)
  • 记录使用EasyWeChat做微信小程序登陆和其他操作
  • OpenAI 宕机 | 如何让 k8s 集群更稳定
  • 基础位运算
  • AI时代来临:掌握信息收集,才能不被淘汰!!!
  • 实体类未设置字段如何不参与转化json?
  • Ubuntu中MySQL安装-02
  • 基于DeepSeek在藏语学习推广和藏语信息化方面可以做哪些工作?
  • 5.进程基本概念
  • fastadmin加密生成token
  • 数据分析系列--④RapidMiner进行关联分析(案例)
  • python编程环境安装保姆级教程--python-3.7.2pycharm2021.2.3社区版
  • 学习数据结构(4)顺序表+单链表
  • MySQL 索引存储结构
  • 在Windows上非ASCII(包括中文名)用户名导致Bazel不能使用的问题
  • 游戏开发领域 - 游戏引擎 UE 与 Unity