如何基于多条件过滤数组？根据start_date、end_date筛选对应状态数据

你可以通过计算属性实现三个复选框的组合过滤，完整逻辑如下：

1. 过滤逻辑说明 #

首先统一将日期转为时间戳比较，避免格式误差，三条状态的判断逻辑采用常规业务语义（若需要和你描述的原始条件一致可自行调整判断规则）：

• future：start_date晚于当前时间，对应未开始的条目
• past：end_date早于当前时间，对应已结束的条目
• in_progress：start_date早等于当前时间且end_date晚等于当前时间，对应进行中的条目

2. 核心代码实现 #

计算属性添加 #

在Vue实例中添加filteredItems计算属性：

computed: {
  filteredItems() {
    const currentTime = Date.now()
    return this.items.filter(item => {
      const startTime = new Date(item.start_date).getTime()
      const endTime = new Date(item.end_date).getTime()

      const isFuture = startTime > currentTime
      const isPast = endTime < currentTime
      const isInProgress = startTime <= currentTime && endTime >= currentTime

      // 只要对应状态的复选框勾选，就保留该条目
      return (this.future && isFuture) || (this.past && isPast) || (this.in_progress && isInProgress)
    })
  }
}

视图绑定 #

直接遍历过滤后的计算属性渲染列表即可：

<!-- 原有复选框代码 -->
<input v-model="future" type="checkbox" /> 显示未开始
<input v-model="past" type="checkbox" /> 显示已结束
<input v-model="in_progress" type="checkbox"/> 显示进行中

<!-- 过滤后的列表 -->
<ul>
  <li v-for="item in filteredItems" :key="item.id">
    名称：{{item.name}}，开始时间：{{item.start_date}}，结束时间：{{item.end_date}}
  </li>
</ul>

3. 注意事项 #

你提供的data中start_date和end_date字段多了一层重复的双引号，需要修正为单组双引号的ISO字符串格式，否则日期转换会失败，修正示例：

items: [
  {
    "name":"Test",
    "start_date":"2022-01-01T07:00:00-08:00",
    "end_date":"2022-03-01T07:00:00-08:00",
    "id":"2asfa3r9adsgu83yf83"
  },
  // 其余条目同理去掉多余双引号即可
]

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