vue实现统计列表

Vue 实现统计列表功能

在 Vue 中实现统计列表功能通常需要结合数据计算和展示逻辑。以下是几种常见方法：

计算属性统计

利用 Vue 的计算属性可以轻松实现列表统计：

computed: {
  totalItems() {
    return this.items.length
  },
  completedItems() {
    return this.items.filter(item => item.completed).length
  },
  pendingItems() {
    return this.totalItems - this.completedItems
  }
}

使用 Vuex 进行全局统计

对于大型应用，可以使用 Vuex 管理状态并计算统计信息：

// store.js
getters: {
  itemStatistics: state => {
    return {
      total: state.items.length,
      completed: state.items.filter(i => i.completed).length
    }
  }
}

动态统计组件

创建一个可复用的统计组件：

<template>
  <div class="stats">
    <div>总计: {{ total }}</div>
    <div>已完成: {{ completed }}</div>
    <div>未完成: {{ pending }}</div>
  </div>
</template>

<script>
export default {
  props: ['items'],
  computed: {
    total() { return this.items.length },
    completed() { return this.items.filter(i => i.completed).length },
    pending() { return this.total - this.completed }
  }
}
</script>

实时更新统计

结合 Watcher 实现实时统计更新：

watch: {
  items: {
    handler(newVal) {
      this.updateStatistics(newVal)
    },
    deep: true
  }
},
methods: {
  updateStatistics(items) {
    this.statistics = {
      total: items.length,
      // 其他统计计算
    }
  }
}

使用第三方库

对于复杂统计，可以集成像 Lodash 这样的工具库：

import _ from 'lodash'

computed: {
  groupedItems() {
    return _.groupBy(this.items, 'category')
  }
}

每种方法适用于不同场景，计算属性适合简单统计，Vuex 适合全局状态管理，独立组件提供更好的复用性，而第三方库则能处理更复杂的统计需求。