在 Blazor 中是否有更短的方法来完成这项任务？答案

【问题标题】：Is there a shorter way of accomplishing this task in Blazor?在 Blazor 中是否有更短的方法来完成这项任务？
【发布时间】：2020-07-10 17:50:59
【问题描述】：

<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”语句。

【问题讨论】：

好的，那些投票结束这个问题的人可以做我所做的：只需从标题中删除“更好”这个词。现在这个问题是合法的，不是基于意见的，因此不应该关闭......
我同意。听听！！ :)

标签： c# asp.net-core blazor blazor-server-side asp.net-blazor

【解决方案1】：

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

在你的 ToDo 类定义中添加一个名为

的新字段

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

而用法是：

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

希望这会有所帮助...

【讨论】：

【解决方案2】：

根据Conditional HTML element attributes

HTML 元素属性基于 .NET 有条件地呈现价值。如果该值为 false 或 null，则不会呈现该属性。如果值为真，属性呈现最小化。

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

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

【讨论】：

如果条件返回空值，有趣的 enet 实现也会一样吗？但是，我更愿意有条件地应用一个类，但这种编码风格。