v-selectのサンプル_シンプルかつ綺麗なセレクトボックスを使ってみる

Tribute to Vuetify

Good UI framework 'Vuetify'.

v-selectのサンプル_基本形

v-selectのサンプル_外枠付きのスタイル

v-selectのサンプル_単一仕様の場合に使えるスタイル

マテリアルデザインにおける「ソロ」スタイルのフィールドを再現できます。
単一の目的としてテキストフィールド等が使用される場合、マテリアルデザインではこのスタイルを使用する事が推奨されています。 Material Design 公式の　Field variations -- Solo fields の項を参照。

v-selectのサンプル_塗りを持ったスタイル

※塗りを持ったスタイルのフィールドです。

v-selectのサンプル_見える文言と渡される値が別々のセレクトボックス

いわゆる、labelとvalueを持たせた状態のセレクトボックスです。

この部分に、セレクトボックスで選択した項目のdataがリアルタイムで表示されます。
data が UI操作によって、フロント側で更新されていることを確認できると思います。

[選択した要素] ▶︎ 値：{{ selectedItem.selectedValue }} | ▶︎ UI上に表示されるラベル：{{ selectedItem.showLabel }}