Vuetify使用cards问题

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

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

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

[Asm] 纯文本查看 复制代码

<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
[mw_shl_code=asm,true]

果然两百积分很简单

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

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

确实这两百积分很容易，来晚了

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

kof21411 发表于 2021-12-2 16:32
[mw_shl_code=asm,true]

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

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

[Asm] 纯文本查看 复制代码

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
[mw_shl_code=asm,true]cards: [
{ title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/ ...

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

帐号		自动登录	找回密码
密码			注册[Register]

[求助] Vuetify使用cards问题

最佳答案