Vuetify3に対応したv-btnサンプル
Tribute to Vuetify
This page is working by Vue.js3 and Vuetify3.
Vuetify3の v-btn のサンプル_5種類のvariant
Vuetify3の v-btn を表示しています。
左から、default, outlined, tonal, text, plain です。
Vuetify3の v-btn のサンプル_color prop を使って色を変えてみる
Vuetify3の v-btn を表示しています。
左から、default, outlined, tonal, text, plain です。
color という prop には、color="hsla(200, 80%, 50%, 1)" を渡しています。
同じ色の値を渡していますが、variantによって、ボタンの見た目が上記の様に変化する事がわかるかと思います。
Vuetify3の v-btn のサンプル_ボタンを押したら何かを実行する
左には v-on:click を、右には @click を指定。どちらでも関数を実行できます。また、ボタンのラベルにある様に、setup内の関数もmethods内の関数も実行可能です。(CompositionAPIを使うなら、基本は前者を使うと思いますが)