Vue.js待办事项列表：用计算属性展示任务完成数量

要实现在标题旁显示未完成/已完成任务数量，只需通过计算属性过滤任务数组并获取长度即可，具体步骤如下：

1. 定义计算属性 #

在Vue实例的computed选项中添加两个计算属性，分别计算未完成和已完成任务的数量：

• pendingTasksCount：过滤出done为false的任务，返回其长度
• completedTasksCount：过滤出done为true的任务，返回其长度

2. 更新HTML模板 #

将计算属性插入对应的<h2>标题中，动态显示数量。

完整代码示例 #

HTML 模板

<div id="app">
  <!-- 未完成任务列表标题，显示未完成数量 -->
  <h2>To Do ({{ pendingTasksCount }})</h2>
  <ul>
    <li v-for="(task, index) in tasks" :key="index" v-if="!task.done">
      {{ task.text }}
      <button @click="task.done = true">标记完成</button>
    </li>
  </ul>

  <!-- 已完成任务列表标题，显示已完成数量 -->
  <h2>Already done ({{ completedTasksCount }})</h2>
  <ul>
    <li v-for="(task, index) in tasks" :key="index" v-if="task.done">
      {{ task.text }}
      <button @click="task.done = false">标记未完成</button>
    </li>
  </ul>

  <!-- 添加新任务区域 -->
  <input v-model="newTask" placeholder="输入新任务">
  <button @click="addTask">添加任务</button>
</div>

JavaScript 代码

new Vue({
  el: '#app',
  data() {
    return {
      newTask: '',
      tasks: [
        { text: '学习Vue计算属性', done: false },
        { text: '完成待办清单功能', done: false },
        { text: '测试页面交互', done: true }
      ]
    }
  },
  computed: {
    pendingTasksCount() {
      // 过滤未完成任务并返回数量
      return this.tasks.filter(task => !task.done).length
    },
    completedTasksCount() {
      // 过滤已完成任务并返回数量
      return this.tasks.filter(task => task.done).length
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({ text: this.newTask.trim(), done: false })
        this.newTask = ''
      }
    }
  }
})

为什么用计算属性？ #

计算属性会自动依赖tasks数组的变化进行更新，且具备缓存特性——只有当tasks数组内容改变时才会重新计算，相比直接在模板中使用tasks.filter(...)更高效，也让模板代码更简洁易读。

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