Vue3中计算属性的使用方式和优势详解

<div class="bengContentBox" :class="[
    resData.list.length == 1 ? 'one-data' : 
    resData.list.length == 3 ? 'three-data' : 
    // ... 更多条件
]">

<template>
  <div class="bengContentBox" :class="contentBoxClass"></div>
</template>
 
<script setup>
import { computed } from 'vue';
 
const contentBoxClass = computed(() => {
  const { list, stationName } = resData.value;
  if (list.length === 1) return 'one-data';
  if (list.length === 3) return 'three-data';
  if (stationName === '一级站') return 'one-four-data';
  return ''; // 默认值
});
</script>

const isTwoLevelPump = computed(() => {
  const { stationName } = resData.value;
  return ["二级站", "三级站", "四级站", "岗陈东站", "岗陈西站"].includes(stationName);
});

const STATION_CONFIG = {
  '二级站': { type: 'twoLevelPump', hasInlet: true, hasOutlet: true },
  '三级站': { type: 'twoLevelPump', hasInlet: true, hasOutlet: true },
  '长兴站': { type: 'singlePump', hasInlet: true, hasOutlet: false },
  '一级站': { type: 'mainStation', hasInlet: false, hasOutlet: true },
  // 可轻松扩展新站点
};
 
const currentStationConfig = computed(() => 
  STATION_CONFIG[resData.value.stationName] || {}
);
 
// 使用示例
const isTwoLevelPump = computed(() => 
  currentStationConfig.value.type === 'twoLevelPump'
);

interface StationConfig {
  type: 'twoLevelPump' | 'singlePump' | 'mainStation';
  hasInlet: boolean;
  hasOutlet: boolean;
}