[Vue.js]Vuetifyで綺麗なセレクトボックスを簡単に実装する方法[v-select]

Vuetifyの記事_v-selectについて

Vuetify でセレクトボックスを簡単に使ってみる

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事の、13回目になります。
今回は、マテリアルデザインに沿った仕様のセレクトボックスを簡単に実装することができる
v-select というコンポーネントについて、書いていきます。

↑こんな感じの、セレクトボックスを表示してみます。サンプルでは、UI操作により、フロント側でdataが更新されていることがわかるかと思います。

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

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

この記事:[Vue.js]Vuetifyで綺麗なセレクトボックスを簡単に実装する方法[v-select] を書いた人

tedate.jp を運営しています。都内在住。 Webデザイナー/グラフィックデザイナーになって、通算15年程になります。 皆さまがWeb制作をもっと楽しめるような、良い情報を発信できるように。日々記事を書いています。