【Vue.js】v-on：APIからランダムでユーザー情報を表示

この記事では、【Vue.js】v-onディレクティブを使ったボタンクリックで処理を実行するサンプルコードをご紹介します。

サンプルコード

v-onディレクティブを使ったボタンクリックで、ランダムにユーザー情報を表示します。

v-onディレクディブ

ここでは、v-onディレクティブを次のように記述しました。

<button v-on:click="getUser" >ユーザーを取得</button>

↓　短縮形

<button @click="getUser" >ユーザーを取得</button>

使用したAPI

「Random User Generator」を使用させていただきました。

「Random User Generator」は、ランダムでダミーユーザー情報をJSON等で提供するAPIです。