[Vue.js]Vuetifyを用いて綺麗にスタイリングされたボタンを扱う方法[v-btn]

Vuetify関連の記事_v-btnについて

Vuetifyでシンプルかつ、綺麗にスタイリングされたボタンを使ってみます

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、20回目になります。

以前の記事 [Vue.js, JavaScript]クリックされた要素を特定してdata属性から情報を取得する方法
v-chip という、
v-btn よりも小さいサイズの押せる要素について、少しだけふれました。

その記事を書いた時、
そういえば、v-btn についてはこれまで具体的に書いていなかったことに気づきまして、
こちらの v-btn は、比較的いろいろな props を簡単に試せることもあり、
良いサンプルになるのではと思いまして、今回の記事を書くことにしました。

Vuetifyの導入方法について等は、以前の記事:
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編]CDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法 内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

それでは早速、次のページよりv-btnに関して、コードのご紹介および解説を行なっていきたいと思います。ぜひご覧ください。

この記事:[Vue.js]Vuetifyを用いて綺麗にスタイリングされたボタンを扱う方法[v-btn] を書いた人

tedate.jp を運営しています。都内在住。 Webデザイナー/グラフィックデザイナーになって、通算15年程になります。 皆さまがWeb制作をもっと楽しめるような、良い情報を発信できるように。日々記事を書いています。 Webデザイナーとしての修行時代(受託のWebデザイナー時代)のエピソードを含む、私の「人となり」がある程度わかる記事はこちらにございます。