目的：

为了将C#变量和html标签内容关联，Blazor提供了双向绑定功能；

本文将举例说明双向绑定的使用方法和一些注意事项；

input标签下的双向绑定示例：

如图，该组件内有两个input标签，都分别绑定了下方的同一个C#变量“username”。

这里绑定语法分为@bind-value和@bind，效果是等同的，只是两种写法。value代表的是输入框中的内容。

输入框本身只提供了键入内容的功能，双向绑定也只是针对数值的更新提供的便捷功能。但是如果希望自定义一些逻辑来限制可以输入的内容该怎么办呢？

首先想到的是通过@onchange字段添加当内容变化后执行的函数；

但是如果你在使用@bind双向绑定后再加入@onchange字段会报错，如下：

意思是存在两个onchange事件了。为什么呢？因为双向绑定本身就是一种对于onchange事件的封装，也就是类似于手写了一个@onchange=()=>{this.value = value}。

这就暴露了双向绑定的一个小问题，如果我希望在用户输入的时候判定键入的内容，如果不合法则将输入框内容清空为""，就需要一些额外的小操作；

举个例子，绑定还是正常绑定，我们可以修改绑定变量的{get;set;}内容，使set的时候添加内容校验逻辑，如果不符合就set空值，符合后再赋值修改后的值;

这家伙貌似只能在input标签用😑

微软给的示例也是input；

至少我没在其他地方用这东西，这东西也不是非用不可；

以上就是有关双向绑定的使用介绍和注意事项；