Vue

Vue.js セレクトボックスの値に応じて表示内容を切り替える

だいぶVueについてわかってきたので、ひとつ作ってみた。

用途

セレクトボックスで選択した値によって、表示内容を切り替えるプログラム。

セレクトされた値に応じて警告、あるいは入力項目が変わるなどの場合に使う。

実装

v-modelディレクティブを使って、formの値に対する双方向のデータバインディングを使う。

https://jp.vuejs.org/v2/guide/forms.html

See the Pen select changer by git-cat-meow (@git-cat-meow) on CodePen.

v-modelで取得した値を変数に格納して、v-ifの条件式を使ってtemplateを出し分けるだけ。

公式で指摘されているように、初期値が選択されても大丈夫なようにvalueに空の値を設定しておく。念のためdisabeledも設定しておく。

あとはtemplateにv-ifを仕込むが、イコール3つで型の確認も行う厳密なイコールになるようにしておく。

シンプルに実装できた。いい感じだ。初歩の内容だが、作りたいものが作れたときの達成感は重要。

カテゴリー: Vue
このサイトの主
投稿を作成しました 98

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る