Есть ли более короткий способ выполнить эту задачу в Blazor?

<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.

Источник

2 ответа

Решение

You can do something like this...

In your ToDo class definition add a new field named

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

And the usage would be:

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

Hope this helps...

Источник

Согласно условным атрибутам элемента HTML

Атрибуты HTML-элемента условно отображаются на основе значения.NET. Если значение равно false или null, атрибут не отображается. Если значение истинно, атрибут отображается в свернутом виде.

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

<span style="@item.IsDone ? "text-decoration: line-through" : null">@item.Title</span>
Источник
Другие вопросы по тегам