<div id="app"> <h1 class="title">我的待办任务</h1> <div class="content"> <p> <span class="all-count">任务总数：3 个</span> <span class="unfinish-count">未完成：2 个</span> </p> <p> <input class="task-input" placeholder="请输入新待办任务" v-model="pengdingRenWu" type="text" /> <button class="btn" @click="add(pengdingRenWu)">添加任务</button> <button class="btn">清除已完成</button> </p> <p> <h3>任务列表</h3> </p> <ul class="task-list"> <li class="normal"> <input type="checkbox" class="ckbox" /> <input type="text" class="task-input" style="display: none;" /> <span>学习Vue</span> </li> <li class="done"> <input type="checkbox" class="ckbox" /> <input type="text" class="task-input" style="display: none;" /> <span>学习React</span> </li> <li class="normal"> <input type="checkbox" class="ckbox" /> <input type="text" class="task-input" style="display: none;" /> <span>学习Angular</span> </li> </ul> </div> </div> <script src="js/vue.js"></script> <script> // 待办任务列表 // 文本框中输入新任务内容，点击“添加”按钮将新任务添加到任务列表中。 // 单击未完成任务文字，切换为输入框显示，重新编辑后，离开焦点自动修改任务内容。 // 任务已完成可点击前面的复选框，勾选后给li标签移除normal样式，添加done样式，并且未完成任务数需要减一。 // 顶部显示任务总数、未完成任务数。点击“清除已完成”按钮，则删除所有已完成任务 // TODO 使用Vue完成上述需求

使用 Vue.js 构建待办事项列表应用，需要实现任务的添加、编辑、状态切换和删除等功能。以下是实现这些需求的基本步骤和代码示例。

• 初始化待办任务列表：在 Vue 实例中定义待办任务的数据结构。
• 添加任务：通过输入框和按钮，将新任务添加到列表中。
• 编辑任务：点击未完成任务，切换显示为输入框，编辑后更新任务内容。
• 切换任务状态：通过复选框勾选，改变任务的完成状态，并更新未完成任务数。
• 删除已完成的任务：通过按钮点击，移除所有已完成的任务。

待办任务列表实现

new Vue({
  el: '#app',
  data: {
    tasks: [
      { name: '学习Vue', done: false },
      { name: '学习React', done: true },
      { name: '学习Angular', done: false }
    ],
    newTask: ''
  },
  computed: {
    taskCount() {
      return this.tasks.length;
    },
    undoneCount() {
      return this.tasks.filter(task => !task.done).length;
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ name: this.newTask, done: false });
        this.newTask = '';
      }
    },
    toggleTask(index) {
      this.tasks[index].done = !this.tasks[index].done;
      if (this.tasks[index].done) {
        this.undoneCount--;
      } else {
        this.undoneCount++;
      }
    },
    removeDoneTasks() {
      this.tasks = this.tasks.filter(task => !task.done);
    }
  }
});

HTML 结构

<div id="app">
  <h1 class="title">我的待办任务</h1>
  <div class="content">
    <p>
      <span class="all-count">任务总数：{{ taskCount }} 个</span>
      <span class="unfinish-count">未完成：{{ undoneCount }} 个</span>
    </p>
    <input class="task-input" placeholder="请输入新待办任务" v-model="newTask" type="text" />
    <button class="btn" @click="addTask">添加任务</button>
    <button class="btn" @click="removeDoneTasks">清除已完成</button>
    <ul class="task-list">
      <li v-for="(task, index) in tasks" :key="index" :class="{ done: task.done }">
        <input type="checkbox" @change="toggleTask(index)" />
        <span>{{ task.name }}</span>
      </li>
    </ul>
  </div>
</script>

上述代码实现了待办事项列表的基本功能，包括任务的添加、状态切换和删除已完成的任务。你可以根据具体需求进一步扩展和优化应用的功能和界面。123456789