Vue.js实现点击<li>元素添加指定类名的方法求助

嗨，我明白你想要实现的效果——点击任务列表项就能标记为已完成，同时给它加上对应的类名。既然你熟悉jQuery的DOM操作方式，那我得先提醒你，Vue的核心是数据驱动，我们不用直接去操作DOM元素，而是通过控制数据状态来让Vue自动更新视图，这会比jQuery的方式更简洁也更符合Vue的设计理念。

下面我给你两种常见的实现方式，分别对应Vue 2的选项式API和Vue 3的组合式API，你可以根据自己的项目版本选择：

方式一：Vue 2 选项式API #

<template>
  <ul>
    <!-- 循环渲染任务列表，绑定点击事件和类名 -->
    <li 
      v-for="(task, index) in tasks" 
      :key="index"
      :class="{ 'completed': task.completed }"
      @click="toggleTask(index)"
    >
      {{ task.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      // 定义任务列表数据，每个任务包含文本和完成状态
      tasks: [
        { text: '学习Vue基础', completed: false },
        { text: '完成任务列表功能', completed: false },
        { text: '整理笔记', completed: false }
      ]
    }
  },
  methods: {
    // 切换任务的完成状态
    toggleTask(index) {
      this.tasks[index].completed = !this.tasks[index].completed;
    }
  }
}
</script>

<style>
/* 已完成任务的样式 */
.completed {
  text-decoration: line-through;
  color: #999;
}
li {
  cursor: pointer;
  margin: 8px 0;
}
</style>

方式二：Vue 3 组合式API（