Есть ли более короткий способ выполнить эту задачу в 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, атрибут не отображается. Если значение истинно, атрибут отображается минимизированным.

Чтобы вы могли использовать встроенное условие (при условии, что это работает, я не пробовал это):

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