Vue.jsを利用してタブをクリックすると画像が切り替わる処理を実装したいと思います。
Vue.jsは高速で画面描画を変更することに優れていますので、是非活用したい機能です。
例えば、3LDKのタブをクリックすると、該当の画像が表示されるような処理です。
それでは始めていきます。
【動画と連動】
Vueインスタンスの作成
new Vue({ el : '#app' , …})でVueインスタンスを作成しています。
el: '#app'により、HTMLのid=appを持つ要素をVueの管理下に置くことができます。
dataには画像データなどの情報を格納します。
リアクティブ更新
filteredImagesはcomputedプロパティで定義され、選択されたタブの種類に応じた画像配列を返します。
例えばタブから3LDKのカテゴリーを選択すると、images["3LDK"]の配列に登録された画像データが配列として返ってきます。
1roomのカテゴリーを選択すれば、images["1room"]の画像が返ってくるよう任意に切り替えることもできます。
HTML側では、この返ってきた配列をv-forで1要素ずつ展開し、各要素をgroupという変数に受け取って画像を表示します。
以上がVue.jsを利用した画像の表示、非表示の切り替えの実装です。
シンプルですが実際の制作にも応用できるポイントです。
【コードの詳細を学べるスクール】
