Vue 前端统计状态数量：如何计算状态等于1和等于2的数量

在 Vue 前端中，可以使用 computed 属性来计算状态等于 1 和等于 2 的数量。首先，假设你有一个数据数组 data，其中包含了各个状态的值。你可以通过 computed 属性来计算等于 1 和等于 2 的数量，示例代码如下：

data() {
  return {
    states: [1, 2, 1, 2, 1, 3, 2, 3, 1, 2] // 假设这是你的数据数组
  }
},
computed: {
  countState1() {
    return this.states.filter(state => state === 1).length;
  },
  countState2() {
    return this.states.filter(state => state === 2).length;
  }
}

在上述代码中，我们使用了 computed 属性来计算等于 1 和等于 2 的数量。countState1 计算状态等于 1 的数量，countState2 计算状态等于 2 的数量。通过使用 filter 方法来筛选出符合条件的元素，并使用 length 属性来获取筛选后的数组长度，即可得到数量。

然后，你可以在模板中使用这两个计算属性来显示数量，示例代码如下：

<div>
  状态等于 1 的数量：{{ countState1 }}
</div>
<div>
  状态等于 2 的数量：{{ countState2 }}
</div>

在上述代码中，我们使用双花括号语法来显示计算属性的值。{{ countState1 }} 表示显示状态等于 1 的数量，{{ countState2 }} 表示显示状态等于 2 的数量。你可以根据自己的实际情况来修改模板代码。