<p>我想根据窗口的当前断点定义v-img的top属性。</p> <p>我想这样定义：</p> <pre class="brush:php;toolbar:false;">&lt;v-img contain id=&quot;logo-transparent&quot; :top=&quot;logoTop&quot; :width=&quot;logoWidth&quot; :src=&quot;logoTransparent&quot; class=&quot;hidden-xs-only&quot;&gt;&lt;/v-img&gt;</pre> <p>计算属性如下：</p> <pre class="brush:php;toolbar:false;">logoTop(){ switch (this.$vuetify.breakpoint.name) { case 'xl': return &quot;-4%&quot; case 'lg': return &quot;-6%&quot; case 'md': return &quot;-8%&quot; case 'sm': return &quot;-8%&quot; case 'xs': return 0 default: return &quot;-4%&quot; } },</pre> <p>CSS如下：</p> <pre class="brush:php;toolbar:false;">#logo-transparent{ z-index: 1; width: 400px; height: 300px; position: absolute; right: -1%; }</pre> <p>但问题是v-img没有top属性。</p> <p>我想使用计算属性来定义图像的CSS，如下所示：</p> <pre class="brush:php;toolbar:false;">logoTop(){ return { &quot;--top-property&quot; : switch (this.$vuetify.breakpoint.name) { case 'xl': return 400 case 'lg': return 300 case 'md': return 300 case 'sm': return 200 case 'xs': return 0 default: return 400 } } },</pre> <p>在CSS中使用它的方法如下：</p> <pre class="lang-css prettyprint-override"><code>top : var(--top-property) </code></pre> <p>但似乎我不能在这种情况下使用switch。</p> <p>我该如何做呢？</p>

<template>
  <v-img :style="{ top: logoTop }" ... />
</template>

<script>
export default {
  computed: {
    logoTop() {
      switch (this.$vuetify.breakpoint.name) {
        case 'xl': return "-4%"
        case 'lg': return "-6%"
        case 'md': return "-8%"
        case 'sm': return "-8%"
        case 'xs': return 0
        default: return "-4%"
      }
    },
  }
}
</script>

logoTop() {
    let topProperty;
    switch (this.$vuetify.breakpoint.name) {
        case 'xl':
            topProperty =  400;
            break;
        case 'lg':
        case 'md':
            topProperty =  300;
            break;
        case 'sm':
            topProperty =  200;
            break;
        case 'xs':
            topProperty =  0;
            break;
        default:
            topProperty = 400;
    }
    return {
        "--top-property" : topProperty
    }
},