11もOK)など、Vueディレクティブにはまってしまっていたので、たまにはVueの基礎的な記事も作っておかなきゃという気分になりました。開発するならVueがもつ強力な機能、データ・バインディングを絡めたものをつくりたいので、入力部分にフォーカスを当てて、ある機能をつくってみることにしました。その機能とは、画像を選択するラジオボタンです。ラジオボタンといえば選択式の入力のことですが、通常は次のようにテキストと一緒に表示する形が多いのではないでしょうか。このような選択を画像で行いたいときもあるでしょう。いうことで今回は画像を使ったラジオボタンをVueで実装してみます。Vue学習の参考にしてくださいね。合わせて読みたいやりたいこと画像をクリックするとチェックが切り替わる選択された画像は背景色を変えるv-modelで変数をバインディングするデモを用意しましたまず分かりやすいようにデモページを用意しました。気軽に体験してみてください。Vueの準備をするでは、まずVueの準備をします。Vue()で基本形をつくります。data変数には表示したい画像の配列imagesとデフォルト値imageIdを追加しています。画像を表示する部分をつくる続いてimagesに設定した画像をループで表示する部分です。</label></div>まずv-forでキー(id)と値をimagesからとりだします。type=”radio”>へidを設定し、imageIdをバインディングします。ラジオボタンに変更があったら自動的にimageIdの値が更新されることになります。最後に<img>タグのsrcを設定して画像を表示させます。<label>〜</label>内にラジオボタンと画像の2つを入れていますが、こうすることで画像がクリックされてもラジオボタンが選択されたことになります。この時点でどうなっているか確認してみましょう。画像とラジオボタンがうまく表示されました。スタイルシートを設定するまだ今の状態では見た目があまりきれいではありませんので、スタイルシートを適用させましょう。--></div>まずは:styleですが、この部分で選択された画像の背景色を変更しています。imageIdとidが同じであればその画像は現在選択中ということになりますので、背景色は#dddに設定し、それ以外の場合は空白にします。全体的にスタイルシートを設定するためにimage-radio-buttonというクラスを指定していますが、その内容はつぎのようなものになります。-->これで、ラジオボタンは中央寄せになりますし、選択肢もズラっと横に並ぶようになります。マウスホバー時には画像の背景色を変え、選択できることが直感的にわかるようにカーソルが手のマークになるように設定しています。教材ソースコードをダウンロード今回実際の開発したソースコードを以下からダウンロードできます。cdnを使っているので、展開してすぐ実行することができます。画像はご自身で用意してください。Vueで画像を選択するラジオボタンをつくるおわりにということで、今回は初心に返ってVueの基礎的な内容をお届けしました。画像を変更すればお好みのラジオボタンを作ることができますし、少し改造すればチェックボックスにすることも簡単にできると思います。Mixを使えば管理も楽になるでしょう。いろんな拡張をやってみてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。