Vuetify使用cards问题

wws741 发表于 2021-12-2 15:58

怎么使用vuetify里的Cards组件实现这样的效果，就是从数据接口拿到数据渲染出来，像它那样渲染

kof21411 发表于 2021-12-2 15:58

<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-card-subtitle v-text="card.title"></v-card-subtitle>
         </v-img>

      </v-card>
   </v-col>
   </v-row>
</v-container>
</v-card>
</template>

<script>
export default {
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 },
   ],
}),
}
</script>

大概是这样吧

466162659 发表于 2021-12-2 20:04

kof21411 发表于 2021-12-2 16:32

果然两百积分很简单

lemonrains 发表于 2021-12-2 21:31

466162659 发表于 2021-12-2 20:04
果然两百积分很简单

确实这两百积分很容易，来晚了{:1_918:}

wws741 发表于 2021-12-3 10:51

kof21411 发表于 2021-12-2 16:32

大佬，他没有三个就放一行来着，不知道怎么控制

wws741 发表于 2021-12-3 10:52

466162659 发表于 2021-12-2 20:04
果然两百积分很简单

哎，我倒是没怎么接触过前端的东西

kof21411 发表于 2021-12-3 11:08

wws741 发表于 2021-12-3 10:51
大佬，他没有三个就放一行来着，不知道怎么控制

说清楚一点

wws741 发表于 2021-12-3 12:19

kof21411 发表于 2021-12-3 11:08
说清楚一点

就是我用大佬那个代码复制过来了，改了我的数据，然后页面渲染不是两行三列，所有数据一列排了

kof21411 发表于 2021-12-3 13:53

wws741 发表于 2021-12-3 12:19
就是我用大佬那个代码复制过来了，改了我的数据，然后页面渲染不是两行三列，所有数据一列排了

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 },
   ]
cards数据你要按这个格式

wws741 发表于 2021-12-3 18:55

kof21411 发表于 2021-12-3 13:53
cards: [
{ title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/ ...

啊，这，我是直接拿的数据接口写的，不是直接在下面写的怎么搞哇

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

Vuetify使用cards问题