如何在Vue.js中统计数组内在线用户数量并渲染显示到页面？

核心逻辑说明 #

统计online用户数量本质是筛选数组中status等于online的项后统计总个数，用JS数组自带方法即可实现，配合Vue的计算属性可以实现用户数据变化时自动同步更新统计值，不需要手动触发重算。

Vue 3 组合式API实现示例 #

<template>
  <div>
    <!-- 直接在模板中调用计算属性展示结果 -->
    <p>当前在线用户数：{{ onlineUserCount }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 你的原始用户数据，可根据实际业务动态赋值/修改
const userData = ref([
  {name: 'xxxxx', surname: 'yyyyy', status: 'online'},
  {name: 'xxxxx', surname: 'yyyyy', status: 'online'},
  {name: 'xxxxx', surname: 'yyyyy', status: 'offline'},
  {name: 'xxxxx', surname: 'yyyyy', status: 'online'},
  {name: 'xxxxx', surname: 'yyyyy', status: 'offline'},
  {name: 'xxxxx', surname: 'yyyyy', status: 'online'},
  {name: 'xxxxx', surname: 'yyyyy', status: 'offline'},
])

// 计算属性自动统计在线数量
const onlineUserCount = computed(() => {
  return userData.value.filter(item => item.status === 'online').length
})
</script>

Vue 2 选项式API实现示例 #

<template>
  <div>
    <p>当前在线用户数：{{ onlineUserCount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: [
        {name: 'xxxxx', surname: 'yyyyy', status: 'online'},
        {name: 'xxxxx', surname: 'yyyyy', status: 'online'},
        {name: 'xxxxx', surname: 'yyyyy', status: 'offline'},
        {name: 'xxxxx', surname: 'yyyyy', status: 'online'},
        {name: 'xxxxx', surname: 'yyyyy', status: 'offline'},
        {name: 'xxxxx', surname: 'yyyyy', status: 'online'},
        {name: 'xxxxx', surname: 'yyyyy', status: 'offline'},
      ]
    }
  },
  computed: {
    onlineUserCount() {
      // 也可以用reduce写法，遍历一次即可完成统计，大数据量下性能略优
      return this.userData.reduce((count, item) => item.status === 'online' ? count + 1 : count, 0)
    }
  }
}
</script>

注意事项 #

• 如果不需要响应式更新，也可以直接在模板插值中写统计逻辑：{{ userData.filter(item => item.status === 'online').length }}，但更推荐用计算属性，可读性和性能更好
• 如果用户数据是从接口异步获取的，只需要在接口返回后给userData赋值即可，计算属性会自动更新统计结果

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