有如下数据结构，style：{numerical:34,unit:%,genre：算力总规模，type：“da”}，使用vue3加js封装一个公用的组件，根据style里面的type的值显示不同的样式

在Vue3中，你可以创建一个通用的组件，利用`v-if`或`v-show`条件渲染来根据不同类型的值显示对应的样式。这里是一个简单的例子，假设我们创建一个名为`StatDisplay`的组件：

<template>
  <div :class="styleType === 'da' ? 'stat-style-numerical' : 'stat-style-unit'">
    {{ style.numerical }}
    {{ type === 'da' ? '%' : '算力单位' }} ({{ style.unit }})
  </div>
</template>

<script>
export default {
  name: "StatDisplay",
  props: {
    style: {
      type: Object,
      required: true,
      // 定义数据结构，包含numerical、unit和type属性
      default() { return { numerical: null, unit: null, genre: '', type: '' }; }
    },
  },
  computed: {
    // 使用计算属性处理type的判断
    statStyle() {
      if (this.style.type === 'da') {
        return 'stat-style-numerical';
      } else {
        return 'stat-style-unit';
      }
    },
  },
};
</script>

<style scoped>
.stat-style-numerical {
  /* 样式规则展示数字部分 */
}

.stat-style-unit {
  /* 样式规则展示百分比或单位部分 */
}
</style>

在这个组件中，我们接收一个`style`对象作为prop，并根据`type`属性的值动态设置`.stat-style-numerical`或`.stat-style-unit`类。如果`type`是'da'，则显示数值并加上百分比；否则，显示单位。