Blazor不用JS实现选择单选效果

Blazor不用JS实现选择单选效果

首页角色扮演代号-UL更新时间:2024-11-03

比如这样的元素标签:

<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