javascript - 更改 Vuetify v-card 图像的高度？

Question

我正在尝试通过 v-select 动态更改 vuetify v-card 图像的高度。我的情况是这样的，当我选择 1/3 时，卡片图像的高度应为 200px，一半应约为 250px，完整约为 300px。我怎样才能做到这一点？

我创建了一个codepen用于演示:https://codepen.io/anon/pen/JQOqNP?editors=1010 .

 <div id="app">
 <v-app id="inspire">
<v-card>
  <v-card-title>
  <v-layout>
    <v-spacer></v-spacer>
    <v-flex xs3>
      <v-select :items="items" label="Select Card Height" v- 
   model="flexSize"></v-select>
    </v-flex>
    </v-layout>
   </v-card-title>
   <v-divider></v-divider>
   <v-divider></v-divider>
    <v-card-text>
      <v-layout>
        <v-flex xs12 d-flex>
            <v-layout class="my-3 pt-1 justify-center">
              <v-flex xs4>
                  <v-card class = 'mx-2'>
                    <v-img src="https://via.placeholder.com/600x400? 
                   text=+">
                      <v-container>
                        <v-layout class="justify-center">
                          <v-flex class="text-xs-center">
                            <div class="dark--text text--lighten-3 title 
                  mt-5 py-3">Choose an image</div>
                          </v-flex>
                        </v-layout>
                      </v-container>
                    </v-img>
                    <v-card-text>
                      <div>lorem ipsum lorem ipsum  lorem ipsum  lorem 
                ipsum  lorem ipsum </div>
                    </v-card-text>
                  </v-card>
              </v-flex>
            </v-layout>
            <v-layout>
            </v-layout>
        </v-flex>
      </v-layout>
    </v-card-text>
   </v-card>
 </v-app>

     new Vue({
    el: '#app',
   data() {
   return {
     items: [
      '1/3',
      'Half',
      'Full'
    ],
    flexSize: '1/3',
     }
   },
})

提前谢谢大家。

Answer 1

这应该可以解决您的问题:

在您想要更改高度的卡片布局上添加以下内容:

<v-card :style="{height : flexSize == '1/3'?200+'px':flexSize =='half' ? 250 +'px':300+'px'}" </v-card>