我正在尝试通过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',
}
},
})
提前感谢大家。
发布于 2019-06-30 17:10:11
这应该可以解决您的问题:
在您想要更改高度的卡片布局上,添加以下内容:
<v-card :style="{height : flexSize == '1/3'?200+'px':flexSize =='half' ? 250 +'px':300+'px'}" </v-card>
https://stackoverflow.com/questions/56826474
复制相似问题