vue.js - 单击时如何使带有图像的 v-card 展开以显示图像描述？

Question

如何使带有图像的 v-card (Vuetify) 在单击时展开以显示图像描述？

例子：

<v-card>
  <v-img src = "URL" @click ="do something"> </v-img>
  <v-card toggle = "true">
   Image Description shown when clicked
  </v-card?
</vcard>

标签： vue.jsvuejs2vue-componentvuetify.js

Answer 1

希望这是您想到的codepen。我将把剩下的微调留在你手中。

Html:

<v-flex
                v-for="card in cards"
                v-bind="{ [`xs${card.flex}`]: true }"
                :key="card.title"
              >
                <v-card>
                  <v-img
                    :src="card.src"
                    height="200px"
                    @click="card.showDetails = !card.showDetails"
                  >

                  </v-img>

                  <v-card-actions v-show="card.showDetails">
                    {{card.description}}
                  </v-card-actions>
                </v-card>
              </v-flex>

js:

new Vue({
  el: '#app',
  data: () => ({

    cards: [
      { title: 'Pre-fab homes', src: 'https://picsum.photos/800/800', flex: 6, description: "Random Image", showDetails: false },
      { title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 6, description: "House Image", showDetails: false   },
      { title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 6,  description: "Road Image", showDetails: false   },
      { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 6,description: "Plane Image", showDetails: false   }
    ]
  })
})

完整示例

new Vue({
  el: '#app',
  data: () => ({

    cards: [{
        title: 'Pre-fab homes',
        src: 'https://picsum.photos/800/800',
        flex: 6,
        description: "Random Image",
        showDetails: false
      },
      {
        title: 'Pre-fab homes',
        src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg',
        flex: 6,
        description: "House Image",
        showDetails: false
      },
      {
        title: 'Favorite road trips',
        src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg',
        flex: 6,
        description: "Road Image",
        showDetails: false
      },
      {
        title: 'Best airlines',
        src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg',
        flex: 6,
        description: "Plane Image",
        showDetails: false
      }
    ]
  })
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app">
  <v-app id="inspire">
    <v-layout justify-center>
      <v-flex xs12 sm6>

        <v-card>
          <v-container fluid grid-list-md>
            <v-layout row wrap>
              <v-flex v-for="card in cards" v-bind="{ [`xs${card.flex}`]: true }" :key="card.title">
                <v-card>
                  <v-img :src="card.src" height="200px" @click="card.showDetails = !card.showDetails">

                  </v-img>

                  <v-card-actions v-show="card.showDetails">
                    {{card.description}}
                  </v-card-actions>
                </v-card>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>