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.mzph.cn/web/67468.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RK3568 opencv播放视频

文章目录 一、opencv相关视频播放类1. cv::VideoCapture 类主要构造方法&#xff1a;主要方法&#xff1a; 2. 视频播放基本流程代码示例&#xff1a; 3. 获取和设置视频属性4. 结合 FFmpeg 使用5. OpenCV 视频播放的局限性6. 结合 Qt 实现更高级的视频播放总结 二、QT中的代码…

pytorch逻辑回归实现垃圾邮件检测

完整代码&#xff1a; import torch import torch.nn as nn import torch.optim as optim from sklearn.feature_extraction.text import TfidfVectorizer from sklearn.model_selection import train_test_split from sklearn.metrics import accuracy_score import numpy as…

【 CVE-2025-21298】 通过ghidriff查看完整补丁差异

ole32_dec24.dll-ole32.dll 差异 目录 视觉图表差异元数据 Ghidra 差异引擎 命令行二进制元数据差异程序选项

洛谷P3383 【模板】线性筛素数

题目链接&#xff1a;P3383 【模板】线性筛素数 - 洛谷 | 计算机科学教育新生态 题目难度&#xff1a;普及一 题目分析&#xff1a;本题是模板题&#xff0c;用到了线性筛法&#xff0c;其中原理是保证范围内的每个合数都被删掉&#xff08;在 bool 数组里面标记为非素数…

STM32标准库移植RT-Thread nano

STM32标准库移植RT-Thread Nano 哔哩哔哩教程链接&#xff1a;STM32F1标准库移植RT_Thread Nano 移植前的准备 stm32标准库的裸机代码&#xff08;最好带有点灯和串口&#xff09;RT-Thread Nano Pack自己的开发板 移植前的说明 本人是在读学生&#xff0c;正在学习阶段&a…

JVM--类加载器

概念 类加载器&#xff1a;只参与加载过程中的字节码获取并加载到内存中的部分&#xff1b;java虚拟机提供给应用程序去实现获取类和接口字节码数据的一种技术&#xff0c;也就是说java虚拟机是允许程序员写代码去获取字节码信息 类加载是加载的第一步&#xff0c;主要有以下三…

ECMAScript 6语法

1.ES6简介 ECMAScript 6&#xff08;简称ES6&#xff09;是于2015年6月正式发布的JavaScript语言的标准&#xff0c;正式名为ECMAScript 2015&#xff08;ES2015&#xff09;。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序&#xff0c;成为企业级开发语言 。 …

联想Y7000+RTX4060+i7+Ubuntu22.04运行DeepSeek开源多模态大模型Janus-Pro-1B+本地部署

直接上手搓了&#xff1a; conda create -n myenv python3.10 -ygit clone https://github.com/deepseek-ai/Janus.gitcd Januspip install -e .pip install webencodings beautifulsoup4 tinycss2pip install -e .[gradio]pip install pexpect>4.3python demo/app_januspr…

Tez 0.10.1安装

个人博客地址&#xff1a;Tez 0.10.1安装 | 一张假钞的真实世界 具体安装步骤参照官网安装手册即可。此处只对官网手册进行补充。 从官网下载apache-tez-0.10.1-bin.tar.gz进行安装未成功&#xff0c;出现下面的异常。最终按照官网源代码编译的方式安装测试成功。 环境 Had…

FastAPI + GraphQL + SQLAlchemy 实现博客系统

本文将详细介绍如何使用 FastAPI、GraphQL&#xff08;Strawberry&#xff09;和 SQLAlchemy 实现一个带有认证功能的博客系统。 技术栈 FastAPI&#xff1a;高性能的 Python Web 框架Strawberry&#xff1a;Python GraphQL 库SQLAlchemy&#xff1a;Python ORM 框架JWT&…

微服务入门(go)

微服务入门&#xff08;go&#xff09; 和单体服务对比&#xff1a;里面的服务仅仅用于某个特定的业务 一、领域驱动设计&#xff08;DDD&#xff09; 基本概念 领域和子域 领域&#xff1a;有范围的界限&#xff08;边界&#xff09; 子域&#xff1a;划分的小范围 核心域…

深入解析 Linux 内核内存管理核心:mm/memory.c

在 Linux 内核的众多组件中,内存管理模块是系统性能和稳定性的关键。mm/memory.c 文件作为内存管理的核心实现,承载着页面故障处理、页面表管理、内存区域映射与取消映射等重要功能。本文将深入探讨 mm/memory.c 的设计思想、关键机制以及其在内核中的作用,帮助读者更好地理…

安卓通过网络获取位置的方法

一 方法介绍 1. 基本权限设置 首先需要在 AndroidManifest.xml 中添加必要权限&#xff1a; xml <uses-permission android:name"android.permission.INTERNET" /> <uses-permission android:name"android.permission.ACCESS_NETWORK_STATE" /&g…

【B站保姆级视频教程:Jetson配置YOLOv11环境(二)SSH连接的三种方式】

B站同步视频教程&#xff1a;https://www.bilibili.com/video/BV1m5wUeyEQD/ 在Jetson设备上配置YOLOv11环境时&#xff0c;SSH连接是实现远程高效开发与管理的关键一环。不同的网络环境和硬件配置可能会影响SSH连接的方式&#xff0c;本文将结合相关视频内容&#xff0c;详细…

视频拼接,拼接时长版本

目录 视频较长&#xff0c;分辨率较大&#xff0c;这个效果很好&#xff0c;不耗用内存 ffmpeg imageio&#xff0c;适合视频较短 视频较长&#xff0c;分辨率较大&#xff0c;这个效果很好&#xff0c;不耗用内存 ffmpeg import subprocess import glob import os from nats…

Vue.js 什么是 Composition API?

Vue.js 什么是 Composition API&#xff1f; 今天我们来聊聊 Vue 3 引入的一个重要特性&#xff1a;组合式 API&#xff08;Composition API&#xff09;。如果你曾在开发复杂的 Vue 组件时感到代码难以维护&#xff0c;那么组合式 API 可能正是你需要的工具。 什么是组合式 …

Selenium配合Cookies实现网页免登录

文章目录 前言1 方案一&#xff1a;使用Chrome用户数据目录2 方案二&#xff1a;手动获取并保存Cookies&#xff0c;后续使用保存的Cookies3 注意事项 前言 在进行使用Selenium进行爬虫、网页自动化操作时&#xff0c;登录往往是一个必须解决的问题&#xff0c;但是Selenium每次…

计算机毕业设计Python+知识图谱大模型AI医疗问答系统 健康膳食推荐系统 食谱推荐系统 医疗大数据 机器学习 深度学习 人工智能 爬虫 大数据毕业设计

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

关于el-table翻页后序号列递增的组件封装

需求说明&#xff1a; 项目中经常会用到的一个场景&#xff0c;表格第一列显示序号&#xff08;1、2、3...&#xff09;&#xff0c;但是在翻页后要递增显示序号&#xff0c;例如10、11、12&#xff08;假设一页显示10条数据&#xff09;&#xff0c;针对这种情况&#xff0c;封…

Elasticsearch的索引生命周期管理

目录 说明零、参考一、ILM的基本概念二、ILM的实践步骤Elasticsearch ILM策略中的“最小年龄”是如何计算的&#xff1f;如何监控和调整Elasticsearch ILM策略的性能&#xff1f; 1. **监控性能**使用/_cat/thread_pool API基本请求格式请求特定线程池的信息响应内容 2. **调整…