前回の続きです。
####画像の保存
static/imageディレクトリに、今回使用する画像を保存します。本記事では「profile.jpg」という名前で保存します。
####プロフィール画面の表示
index.vueにコードを追加します。
pages/index.vue
<template>
<div>
<Top />
<v-divider></v-divider> // 追記
<Profile /> // 追記
</div>
</template>
<script>
import Top from '~/components/Top.vue'
import Profile from '~/components/Profile.vue' // 追記
export default {
components: {
Top,
Profile, // 追記
}
}
</script>
次にcomponentsディレクトリにProfile.vueを作成します。
components/Profile.vue
<template>
<div id="profile">
<v-container
fluid>
<v-card
width="100vw"
>
<v-card-title
class="pa-5 justify-center display-1 font-italic"
>
自己紹介
</v-card-title>
<v-row
justify="center"
align-content="center"
>
<v-col
cols="12"
sm="5"
md="5"
align="center"
>
<v-row
justify="space-around"
align-content="center"
style="height:100%"
>
<v-avatar // アバター表示
width="60vW"
height="auto"
>
<img
src="/image/profile.jpg"
alt="PROFILE"
style="object-fit: cover;"
>
</v-avatar>
</v-row>
</v-col>
<v-col
cols="12"
sm="6"
md="6"
>
<v-list> // プロフィール項目の表示
<v-list-item
v-for="profile in profiles"
:key="profile.content"
>
<v-list-item-content>
<v-list-item-title><v-icon>mdi-check</v-icon> {{ profile.content }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-card>
</v-container>
</div>
</template>
<script>
export default {
data: () => ({
profiles: [
{ content: '名前'},
{ content: '生年月日'},
{ content: '出身地'},
{ content: '出身大学'},
{ content: '職業'},
{ content: '資格'},
{ content: '趣味'},
{ content: '特技'},
{ content: 'その他'},
],
}),
}
</script>
ブラウザが自動更新されるので、確認してみると、
上のような画面が表示されます。
次回は作品紹介画面を作成していきます。