如何在待办事项应用中点击列表或勾选复选框添加删除线？

嘿，这事儿好办！要实现点击列表项或勾选复选框时给内容加删除线，核心就是根据item.status这个布尔值动态切换样式，我给你两种实用方案：

方案一：用动态CSS类（推荐，样式更易维护） #

首先在你的样式里定义一个完成状态的类：

.completed-item {
  text-decoration: line-through;
  color: #888; /* 可选，变灰增强视觉区分 */
}

然后修改你的Vue模板，给整个列表项容器绑定动态类，同时添加点击事件切换状态：

<div 
  v-for="(item, index) in toDoList" 
  :key="index"
  :class="{ 'completed-item': item.status }"
  @click="item.status = !item.status"
  style="cursor: pointer; margin: 8px 0;" /* 鼠标变手型+间距优化 */
>
  <v-checkbox v-model="item.status"></v-checkbox>
  <textfield>{{ item.title }}</textfield>
</div>

为啥这么做？ #

• :class="{ 'completed-item': item.status }"：当item.status为true时，自动给div加上completed-item类，触发删除线样式
• @click="item.status = !item.status"：点击整个列表项就能切换状态，和复选框的v-model联动（因为复选框绑定的也是item.status，所以勾选/取消会同步更新）

方案二：内联样式（无需额外CSS，适合简单场景） #

如果不想写单独的CSS类，直接给文本框绑定内联样式就行：

<div 
  v-for="(item, index) in toDoList" 
  :key="index"
  @click="item.status = !item.status"
  style="cursor: pointer; margin: 8px 0;"
>
  <v-checkbox v-model="item.status"></v-checkbox>
  <textfield 
    :style="{ textDecoration: item.status ? 'line-through' : 'none', color: item.status ? '#888' : 'inherit' }"
  >
    {{ item.title }}
  </textfield>
</div>

这种方式直接通过item.status的值来决定文本的textDecoration属性，不用额外定义CSS类，快速便捷。

小提醒：确保响应式正常 #

要保证toDoList里的每个item都是响应式的，初始化或者添加新项时，记得给每个item带上status属性：

// 初始化示例
data() {
  return {
    toDoList: [
      { title: '整理桌面', status: false },
      { title: '提交代码', status: false }
    ]
  }
}

// 动态添加项的示例
addNewTodo(title) {
  this.toDoList.push({ title, status: false });
}

这样不管是点击复选框还是整个列表项，都能完美触发删除线效果啦！

内容的提问来源于stack exchange，提问作者Sukhpal Singh