- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
!!!Vuetify
[Vue]
!!!Layout
!v-icon
*利用可能なアイコン
**https://material.io/tools/icons/?style=baseline
!!v-card
*Reference
**https://vuetifyjs.com/ja/components/cards
*Tutorial
*https://www.youtube.com/watch?v=pUwyeWLOnP4&list=PL4cUxeGkcC9g0MQZfHwKcuB0Yswgb3gA5&index=19
*パネルから画像まであらゆる用途に使用できる汎用的なコンポーネント
*card コンポーネントには、可能な限りマークアップを簡単にするためのたくさんのヘルパーコンポーネントが存在
<template>
<v-container class="my-5">
<v-layout row wrap>
<v-flex xs12 sm6 md4 lg3 v-for="n in num" :key="n.key">
<v-card flat class="text-xs-center ma-3">
<v-responsive class="pt-4">
image goes here
</v-responsive>
<v-card-tesxt>
<div class="subheading">{{ n.value }}</div>
<div class="gray--text">hello</div>
</v-card-tesxt>
<v-card-action>
<v-btn flat color="gray">
<v-icon small left>message</v-icon>
<span>message</span>
</v-btn>
</v-card-action>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
name: 'Home',
data() {
return {
num: [
{key:1,value:'one'},
{key:2,value:'twe'},
{key:3,value:'three'},
{key:4,value:'four'},
{key:5,value:'five'},
]
}
},
{{ref_image v-card.png}}