比如这样的元素标签:
<ul>
<li>十</li>
<li>百</li>
</ul>
通常要想实现事件点击或当前选中的效果都需要用JS来完成。现在有了Blazor,基本可以不用考虑JS了。
点击事件的代码
<ul>
<li @onclick="@(e => select(10))">十</li>
<li @onclick="@(e => select(100))">百</li>
</ul>
@code {
int cur_select_count = 10;
void select(int count)
{
cur_select_count = count;
}
}
每个li标签的onclick声明一个lamada表达式,然后通过传不同的参数来实现不同的处理。
选中状态
点击事件相对来说比较容易处理,那么选中状态呢?其实也容易,代码如下:
<ul>
<li @onclick="@(e => select(10))" class="@(cur_select_count==10?"selected":"")">十</li>
<li @onclick="@(e => select(100))" class="@(cur_select_count==100?"selected":"")">百</li>
</ul>
每个元素根据当前选中的值与自己的值判断是否一致,一致就是选中状态。
感觉用Blazor比用JavaScript的代码逻辑流畅了好多。
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved