Vue.jsでカテゴリー分けされた画像リストを実装
2023年2月7日 JavaScript, Vue.js たくさんある商品画像やポートフォリオの作品一覧などを見せたいときに、カテゴリーごとに絞って表示できたら便利ですよね。Vue.jsを使えば同じページのまま表示画像を変更できるので、管理も楽になりますよ。 ↑私が10年以上利用している会計ソフト！ 完成図 まずは画像を一覧で表示させ、上部にあるカテゴリー名のボタンをクリックすると、そのカテゴリーに属する画像だけを表示させます。 1. Vue.jsの読み込み設定 まずはHTMLの head 内にVue.jsを読み込ませます。別のバージョンやNPMでのインストール方法は公式サイトを参照してください。 <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script> 2. 画像を一覧表示 Vue.jsの配列を使って画
webmanab.html
Vue.js では、要素を追加／更新／削除したときのアニメーションを、簡単に実装できるような機能が用意されています。 本当にありがたいことに、公式のドキュメントにバッチリとまとまっていますが、それを要約しつつパパッと今日から始められるように、ライトに端折って紹介します。 Enter/Leave とトランジション一覧 — Vue.js シンプルな実装 Vue が提供しているアニメーション機能は、かなり多機能で美味しい仕様になっていますが、とりあえず一番簡単なアプローチで実装してみます。 ポイント <transition name="your-anim-name"> で、v-if や v-show が指定された要素をラップする name 属性が class 名のプレフィクスになる 挿入(enter)／削除(leave)時のアニメーションの進捗を補足して、それに応じた class を自動で切り替
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
