首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >更改Vuetify -card图像的高度?

更改Vuetify -card图像的高度?
EN

Stack Overflow用户
提问于 2019-07-01 00:40:04
回答 1查看 647关注 0票数 0

我正在尝试通过v-select动态更改vuetify v-card图像的高度。我的情况是,当我选择1/3的时候,卡片图像的高度应该是200px,对于一半,它应该是250px左右,对于完整的,应该是300px左右。我怎样才能做到这一点呢?

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

代码语言:javascript
运行
复制
 <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>

代码语言:javascript
运行
复制
     new Vue({
    el: '#app',
   data() {
   return {
     items: [
      '1/3',
      'Half',
      'Full'
    ],
    flexSize: '1/3',
     }
   },
})

提前感谢大家。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-01 01:10:11

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

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

代码语言:javascript
运行
复制
<v-card :style="{height : flexSize == '1/3'?200+'px':flexSize =='half' ? 250 +'px':300+'px'}" </v-card>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56826474

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档