<p>ウィンドウの現在のブレークポイントに基づいて v-img の top 属性を定義したいと考えています。 </p> <p>次のように定義したいと思います:</p> <pre class="brush:php;toolbar:false;"><v-img contains id="logo-transparent" :top="logoTop" :width="logoWidth" :src=" logoTransparent" class="hidden-xs-only""></v-img></pre> <p>計算されたプロパティは次のとおりです。</p> <pre class="brush:php;toolbar:false;">logoTop(){ switch (this.$vuetify.breakpoint.name) { 'xl' の場合: 「-4%」を返します。 ケース 'lg': 「-6%」を返します。 case 'md': "-8%" を返します。 ケース 'sm': 「-8%」を返します。 'xs' の場合: 0 を返す デフォルト： 返品「-4%」 } },</pre> <p>CSS は次のとおりです。</p> <pre class="brush:php;toolbar:false;">#logo-transparent{ z インデックス: 1; 幅: 400ピクセル; 高さ: 300ピクセル; 位置: 絶対; 右: -1%; }</pre> <p>しかし問題は、v-img には top 属性がないことです。 </p> <p>計算されたプロパティを使用して、次のような画像の CSS を定義したいと考えています。 </p> <pre class="brush:php;toolbar:false;">logoTop(){ 戻る { "--top-property" : switch (this.$vuetify.breakpoint.name) { ケース 'xl': 400 を返します ケース 'lg': 300 を返します ケース 'md': 300 を返します ケース 'sm': 200 を返します 'xs' の場合: 0 を返す デフォルト： 400を返す } } },</pre> <p>次のように CSS で使用します。 </p> <pre class="lang-css prettyprint-override"><code>top : var(--top-property) </code></pre> <p>しかしこの場合switchは使えないようです。 </p> <p>どうすればいいですか? </p>