Vue ショッピングカートのケーススタディ

1. ショッピングカートの例

一連の学習が終わったら、ここでショッピングカートのケースを練習してみましょう。

要件: vueを使用して、購入数量をページ上に表示するフォームページを作成します。ショッピングカートの数を増減するには、+ ボタンまたは - ボタンをクリックします。最小数量は 0 未満にすることはできません。製品を削除するには、削除ボタンをクリックします。すべての製品が削除されると、ページ上のフォームは消えます。
次に、「ショッピングカートは空です。」というテキストが表示されます。フォームの下には商品の合計価格が表示されており、商品の数が増えると価格も上がります。デフォルトは 0 元です。

全体的な効果は次のとおりです。

2. コードの実装

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <script src="../js/vue.js"></script>
  <スタイル>
    テーブル{
        境界線: 1px 実線 #e9e9e9;
        境界線の折りたたみ: 折りたたみ;
        境界線の間隔: 0;
    }
    th、td{
        パディング: 8px 16px;
        境界線: 1px 実線 #e9e9e9;
        テキスト配置: 左;
    }
    th{
        背景色: #f7f7f7;
        色: #5c6b77;
        フォントの太さ: 600;
    }
  </スタイル>
</head>
<本文>
<div id="アプリ">
  <div v-if="本の長さ">
    <テーブル>
      <スレッド>
        <tr>
          <番目></番目>
          <th>書籍名</th>
          <th>発行日</th>
          <th>価格</th>
          <th>購入数量</th>
          <th>オペレーション</th>
        </tr>
      </スレッド>
      <t本文>
      <tr v-for="(book, index) 書籍内" :key="book">
        <td>{{インデックス+1}}</td>
        <td>{{書籍名}}</td>
        <td>{{book.publish_date}}</td>
        <td>{{book.price | showPrice}}</td>
        <td>
          <button @click="decrease(index)" :disabled="book.count <= 0">-</button>
          {{book.count}}
          <button @click="増加(インデックス)">+</button>
        </td>
        <td>
          <button @click="removeClick(index)">削除</button>
        </td>
      </tr>
      </tbody>
    </テーブル>
    <p>合計金額: {{totalPrice | showPrice}}</p>
  </div>
  <h2 v-else>ショッピングカートは空です</h2>
</div>
<スクリプト>
  constアプリ = 新しいVue({
    el: "#app",
    データ： {
      書籍:
        {"name":"アルゴリズム入門", "publish_date":"2006-9", "price":20.00, "count": 0},
        {"name":"UNIX プログラミングの芸術", "publish_date":"2006-2", "price":30.00, "count": 0},
        {"name":"プログラミング技術", "publish_date":"2008-10", "price":40.00, "count": 0},
        {"name":"コードコレクション", "publish_date":"2006-3", "price":50.00, "count": 0},
      ]、
    },
    メソッド: {
      // 増加 +
      減少(インデックス){
        this.books[インデックス].count-=1
      },
      // 減らす-
      増加(インデックス){
        this.books[インデックス].count+=1
      },
      //ボタンを削除するremoveClick(index){
        this.books.splice(インデックス、1)
      }
    },
    計算: {
      // 合計価格を計算する totalPrice(){
        合計価格を 0 にする
        for (let item of this.books){
          合計価格 += 商品価格 * 商品数
        }
        合計価格を返す
      }
    },
    // 価格を小数点第2位までフィルタリングするフィルター フィルター: {
      価格を表示(価格){
        '￥' + price.toFixed(2) を返す
      }
    }
  })
</スクリプト>
</本文>
</html>

3. まとめ

v-for:ループ、 booksリストのループ
v-on:イベント監視、クリックイベントの監視
disabled:ボタンがクリック可能かどうかの属性。 Trueならクリック可能、 Falseならクリック不可。判定条件を追加: disabled="book.count <= 0"ショッピングカートの数≤0ときはクリック不可
v-if と v-else:条件判定、 booksリストの長さを判定、長さがある場合はリストを表示、長さが 0 の場合はショッピングカートが空であることを示すテキストを表示
フィルター:カスタムフィルター、価格をフィルターし、フィルター後の価格が小数点以下2桁になるようにします
computed:計算プロパティ、購入の合計価格を計算します

これで、Vue ショッピングカートのケース実践に関するこの記事は終了です。より関連性の高い Vue ショッピングカートの実践コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: