Vue.js

Vue.js

Vue.js v-forで配置した要素をユーザー操作で順番を入れ替える

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

Vue.js v-ifでCSSのサポート状況を条件に表示を切り替え

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

Vue.js レスポンシブ対応ハンバーガーメニュー

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

Vue.js is属性でコンポーネントを切替え 動的クラスと固定クラスを付与してタブを作成

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

Vue.js 作成したシングルページアプリケーションをviteでbuildしサブディレクトリにデプロイする

既定でdistディレクトリに出力されるファイル一式は、本番環境ではメインのURLにデプロイされることを想定し、cssファイルやjsファイルのアセットをメインのURLルートで参照しています。そのためサブディレクトリで公開したいページをbuildする際には、オプションを追加する必要がありました。
スポンサーリンク
タイトルとURLをコピーしました