計算されたスイッチを使用してCSSでv-imgのtop属性を定義する

Question

ウィンドウの現在のブレークポイントに基づいて v-img の top 属性を定義したいと考えています。

次のように定義したいと思います:

<v-img contains id="logo-transparent" :top="logoTop" :width="logoWidth" :src=" logoTransparent" class="hidden-xs-only""></v-img>

計算されたプロパティは次のとおりです。

logoTop(){
            switch (this.$vuetify.breakpoint.name) {
                'xl' の場合: 「-4%」を返します。
                ケース 'lg': 「-6%」を返します。
                case 'md': "-8%" を返します。
                ケース 'sm': 「-8%」を返します。
                'xs' の場合: 0 を返す
                デフォルト：
                    返品「-4%」
            }
        },

CSS は次のとおりです。

#logo-transparent{
  z インデックス: 1;
  幅: 400ピクセル;
  高さ: 300ピクセル;
  位置: 絶対;
  右: -1%;
}

しかし問題は、v-img には top 属性がないことです。

計算されたプロパティを使用して、次のような画像の CSS を定義したいと考えています。

logoTop(){
            戻る {
                "--top-property" : switch (this.$vuetify.breakpoint.name) {
                                    ケース 'xl': 400 を返します
                                    ケース 'lg': 300 を返します
                                    ケース 'md': 300 を返します
                                    ケース 'sm': 200 を返します
                                    'xs' の場合: 0 を返す
                                    デフォルト：
                                        400を返す
                                }
            }
            
        },

次のように CSS で使用します。

<code>top : var(--top-property)
</code>

しかしこの場合switchは使えないようです。

どうすればいいですか?

Answer 1

元の logoTop 計算プロパティを スタイル バインディング で使用して、v-img:# # の top 位置を設定できます。 # リーリー ＃＃＃＃＃＃デモ＃＃＃＃＃＃

Answer 2

switch何も返しません。次のような変数を使用する必要があります

リーリー