練習その1「簡単な絞り込みともっと見るボタンのあるリスト」

Vue.jsの基本的なテンプレートやオプションを使って、商品リストを制作。

制作条件・仕様

• 商品のデータは外部データで持たせる。
• 商品のデータから絞り込みのセレクトボックスをつくる。
• 商品の種類によって絞り込みができる。
• 新しい商品には「new」アイコンを付ける。
• 商品の金額は税込みの価格に変換し、「¥」マークと3桁カンマをつける。
• 割引商品には、割引率と割り引いたあとの金額も表示。
• 1度に表示されるのは最大12枚。
• 「もっと見る」ボタンで更に最大12枚表示。
• 「もっと見る」で表示するものがなくなったらボタンは非表示。
• 商品カードが12枚以下のときは「もっと見る」ボタンは表示させない。