<body>
<div id="app">
<div class="container">
<div class="section">
<h1>【Vue.js】v-on ボタンのクリックで<br />処理を実行するサンプルコード</h1>
<p>APIの「ダミーの顔写真付きユーザー情報」をランダム取得</p>
<button v-on:click="getUser" >ユーザーを取得</button>
</div>
<div class="section">
<div class="box">
<h3>{{firstName}} {{lastName}}</h3>
<img :class="gender" :src="picture" :alt="`${firstName} ${lastName}`">
<ul>
<li>gender: {{gender}}</li>
<li>Email: {{email}}</li>
</ul>
</div>
</div>
</div>
</div>
</body>h1 {
font-size: 1.6em;
}
h3 {
padding: 15px 0 0 0;
}
p {
font-size: 0.9em;
padding: 0 0 5px 0;
}
ul {
padding-bottom: 30px;
}
li {
text-align: left;
word-break: break-all;
list-style-type: none;
}
img {
border-radius: 9px;
border: 3px solid #000;
}
button {
background-color: #3898ec;
border-radius: 9px;
padding: 9px 15px;
cursor: pointer;
color: white;
border: 0;
}
button:hover {
opacity:0.8;
}
button:active {
-webkit-transform: translate(0,2px);
-moz-transform: translate(0,2px);
transform: translate(0,2px);
border-bottom:none;
}
.container {
text-align: center;
}
.box {
margin: 0 auto;
position: static;
max-width: 350px;
border-radius: 14px;
background-color: #fafafa;
box-shadow: 1px 1px 3px 0 #000;
outline-color: #b3b3b3;
outline-offset: 0px;
outline-style: solid;
outline-width: 1px;
}
.male {
border-color: steelblue;
}
.female {
border-color: pink;
}
const app = Vue.createApp({
data(){
return{
firstName: 'Megan',
lastName: 'Wong',
email:'megan.wong@example.com',
gender: 'female',
picture: 'https://randomuser.me/api/portraits/women/66.jpg'
}
},
methods: {
async getUser(){
const res = await fetch("https://randomuser.me/api")
const { results } = await res.json()
// console.log(results)
this.firstName = results[0].name.first
this.lastName = results[0].name.last
this.email =results[0].email
this.gender = results[0].gender
this.picture = results[0].picture.large
},
},
})
app.mount('#app')
External CSS
This Pen doesn't use any external CSS resources.