Question

我正在尝试通过v-select动态更改vuetify v-card图像的高度。我的情况是，当我选择1/3时，卡片图像的高度应为200px，一半应为250px左右，而全幅应为300px。我该如何实现？

我已经创建了一个用于演示的代码笔：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>

更改Vuetify v卡图像的高度？

1 个答案: