使用计算属性绑定基于 Vuetify 的 Viewport 断点的样式

Posted 2023-02-23

【中文标题】使用计算属性绑定基于 Vuetify 的 Viewport 断点的样式

【英文标题】：Use computed property to bind a style based on Vuetify's Viewport breakpoints

【发布时间】：2019-10-06 03:49:56

【问题描述】：

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

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

但是我想使用计算属性来让它更干净，根据Vuetify's docs，这可以使用断点对象来实现，但是由于某种原因我无法让它工作

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

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

<template>
  <div>
    <section>
      <v-layout>
        <v-flex xs12 sm10 offset-sm1>
          <v-card flat >
            <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>

查看 Vuejs devtool 我可以看到计算的属性值按预期变化，但无法弄清楚为什么它没有应用于 CSS

谁能告诉我我做错了什么！

【参考方案1】：

看起来计算属性没有返回完整的样式规范。所以你可以改变计算函数

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

或改变它的使用方式

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