Vue.js

Vue.js v-forで配列を条件に要素を生成し表示しています。表示順を入れ替えるため、配列の順番を入れ替える関数を要素内のボタンのクリックイベントに登録しています。配列のメソッドsplice()を使用して配列の順番を。操作しています。

Vue.jsでCSSのサポート状況を条件に表示を切り替えるために、CSS.supports()関数を使用しました。mountedライフサイクルフックで、この関数を実行するメソッドを実行させています。指定したCSSの対応状況を論理値で返すため、Vue.jsの表示切替に使い勝手がよいと思います。

ビューポートの幅が768px未満で、グローバルメニューがハンバーガーメニューになるヘッダーコンポーネント。v-showでハンバーガーメニューの表示切替を行います。リサイズ時のイベントハンドラをcreatedライフサイクルフックに登録します。

v-forでタブを出力する。。タブには共通のクラス、そのタブ用のクラス、アクティブになった時のクラスを付与する。タブによって表示するコンテンツはコンポーネントとし、is属性で出力する。 タブのコンテンツ表示はtransitionを使用する。