给你写了个小demo, 官网都有api案例,调整data对象里面的flex属性就行
ps:第一次看到这个框架,感觉还挺好看的
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet">
<link rel="stylesheet">
<link rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>
<template>
<v-card
class="mx-auto"
max-width="500"
>
<v-container fluid>
<v-row dense>
<v-col
v-for="card in cards"
:key="card.title"
:cols="card.flex"
>
<v-card>
<v-img
:src="card.src"
class="white--text align-end"
gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
height="200px"
>
<v-card-title v-text="card.title"></v-card-title>
</v-img>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-bookmark</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-share-variant</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
cards: [
{ title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 4 },
{ title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 4 },
{ title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 4 },
{ title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 4 },
{ title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 4 },
{ title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 4 },
],
}),
})
</script>
</body>
</html> | 
发表于 2021-11-24 23:04
