在 Blazor 中是否有更短的方法来完成此任务？

Question

<div class="container">
    @foreach (var item in todos)
    {
    <div class="row">
        <div class="col-sm-6">
            <input type="checkbox" @bind="item.IsDone"/>
            @if(item.IsDone){
                <span style="text-decoration: line-through">@item.Title</span>
            }else{
                <span>@item.Title</span>
            }
        </div>
    </div>
    }
</div>

<input placeholder="Something todo" @bind="newTodo"/>
<button @onclick="AddTodo">Add todo</button>

我希望在选中某个项目时应用该样式，但以更简洁的方式仅使用数据绑定而不使用 'if' 语句。

Answer 1

根据Conditional HTML element attributes

HTML element attributes are conditionally rendered based on the .NET value. If the value is false or null, the attribute isn't rendered. If the value is true, the attribute is rendered minimized.

以便您可以使用内联条件，（假设这可行，我还没有尝试过）：

<span style="@item.IsDone ? "text-decoration: line-through" : null">@item.Title</span>

Answer 2

你可以这样做...

在您的 ToDo class 定义中添加一个名为

的新字段

 public string Style => IsDone ? "text-decoration: line-through" : "";

用法为：

<input type="checkbox" @bind="item.IsDone"/>
<span style="@item.Style">@item.Title</span>

希望这对您有所帮助...

在 Blazor 中是否有更短的方法来完成此任务？

Is there a shorter way of accomplishing this task in Blazor?

c#

asp.net-core

blazor

blazor-server-side

asp.net-blazor