Vue.js 使用computed属性绑定基于Vuetify'；s视口断点

使用VueJS并尝试根据Vuetify的视口断点设置某些文本的样式，我通过将样式绑定到以下条件实现了这一点：

:style="$vuetify.breakpoint.name === 'xs' ? { 'font-size': '1.5rem !important' }: { 'font-size': '2.5rem !important' }" 

然而，我想使用computed属性来代替它，只是为了使它更干净，根据这一点，可以使用breakpoint对象来实现，但是由于某些原因，我无法让它工作

我看了这个，试图从@raina77ow复制答案，但不太确定我做错了什么

下面是我的代码；我正在尝试在v-card-title中设置h3元素的样式

<template>
  <div>
    <section>
      <v-layout>
        <v-flex xs12 sm10 offset-sm1>
          <v-card flat width="auto">
            <v-card-title primary-title>
              <h3
                class="text-xs-center headline mb-0"
                :style="fontSize"
              >
                Some Header here
              </h3>
              <div class="text-xs-center pa-5 mx-5">{{ card_text }}</div>
            </v-card-title>
          </v-card>
        </v-flex>
      </v-layout>
    </section>
  </div>
</template>

<script>
export default {
  computed: {
    fontSize() {
      switch (this.$vuetify.breakpoint.name) {
        case "xs":
          return "1.5rem !important";
        default:
          return "3rem !important";
      }
    }
  },
  data() {
    return {
      card_text:
        "Lorem ipsum dolor sit amet, brute iriure accusata ne mea."
    };
  }
};
</script>

这里有一些标题
{{card_text}}
导出默认值{
计算：{
fontSize（）{
开关（此.$vuetify.breakpoint.name）{
案例“xs”：
返回“1.5rem！重要”；
违约：
返回“3rem！重要”；
}
}
},
数据（）{
返回{
卡片文本：
“我爱你，我爱你。”
};
}
};

查看Vuejs devtool，我可以看到计算出的属性值按预期发生了变化，但无法理解为什么它没有应用于CSS

---

有人能告诉我我做错了什么吗

看起来computed属性没有返回完整的样式规范。因此，您可以更改计算函数

case "xs":
    return {"font-size": "1.5rem !important"};
default:
    return {"font-size": "3rem !important"};

或者改变它的使用方式

:style="{'font-size': fontSize}"