Svelte中如何为条件渲染元素动态修改样式（待办项删除线问题）

你的待办应用删除线样式不生效的核心原因是：TodoItem.svelte 中承载文本的 <div> 元素，style:textDecoration 指令没有绑定对应的变量值，导致样式始终不会根据 completed 状态变化。

修复步骤 #

1. 修正样式指令的绑定

在 TodoItem.svelte 中，将文本所在的 <div> 修改为：

<div style:textDecoration={textDecoration} style:textAlign="left">
    {text}
</div>

你之前只写了 style:textDecoration，缺少了 ={textDecoration} 的变量绑定，这会导致该样式指令完全不生效。

2. 同步复选框与状态（可选但推荐）

当前复选框的状态和 completed 变量没有关联，点击后复选框不会自动勾选/取消，建议绑定 checked 属性：

<input
    checked={completed}
    on:click={onCheck}
    id={`todo-checkbox-${text}`}
    type="checkbox"
/>

3. 优化父组件的状态更新方式（可选但推荐）

Svelte 的响应式依赖赋值触发更新，直接修改数组内对象的属性可能导致状态更新不及时。将 +page.svelte 中的 checkTodo 函数改为不可变更新：

const checkTodo = (id: number) => {
    todos = todos.map(todo => 
        todo.id === id ? {...todo, completed: !todo.completed} : todo
    );
};

这种方式会重新生成数组，确保 Svelte 能检测到状态变化，避免潜在的同步问题。

4. 用类绑定替代 style 指令（可选更优雅的写法）

如果觉得 style 指令不够直观，可以改用类绑定：
在 TodoItem.svelte 的 <style> 中添加：

.completed {
    text-decoration: line-through;
}

然后将文本 <div> 修改为：

<div class:completed={completed} style:textAlign="left">
    {text}
</div>

同时可以删掉 textDecoration 相关的响应式声明，代码更简洁。

修复后的关键代码片段 #

TodoItem.svelte

<script lang="ts">
    export let text: string;
    export let onDelete: () => void;
    export let onCheck: () => void;
    export let completed: boolean;
</script>

{#if text}
    <div class="todoContainer">
        <input
            checked={completed}
            on:click={onCheck}
            id={`todo-checkbox-${text}`}
            type="checkbox"
        />
        <div class:completed={completed} style:textAlign="left">
            {text}
        </div>
        <div on:click={onDelete} on:keypress={onDelete}>x</div>
    </div>
{/if}

<style>
    .todoContainer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 50px;
        border: 1px solid black;
        border-radius: 5px;
        margin: 10px 0;
    }
    .completed {
        text-decoration: line-through;
    }
</style>

+page.svelte（checkTodo函数）

const checkTodo = (id: number) => {
    todos = todos.map(todo => 
        todo.id === id ? {...todo, completed: !todo.completed} : todo
    );
};

内容的提问来源于stack exchange，提问作者Joshua Kalejaiye