c# - 在 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

你可以做这样的事情......

在您的 ToDo 类定义中添加一个名为的新字段

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

用法是：

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

希望这可以帮助...

Answer 2

根据条件 HTML 元素属性

HTML 元素属性根据 .NET 值有条件地呈现。如果该值为 false 或 null，则不会呈现该属性。如果该值为 true，则将属性呈现为最小化。

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

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