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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueでショッピングカートを実装する簡単な練習

<<:  HTML ウェブページにおけるさまざまなフォント形式の詳細

>>:  MySQL ストアド プロシージャのクエリ コマンドの概要

推薦する

VMWare12 グラフィックチュートリアルで Apple Mac OS X をインストールする

1. はじめに:友人はシステム知識を学びたいと考えており、Apple のラップトップを使用していまし...

IE のテキストモード! DOCTYPE の役割の紹介

前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...

Nginx の書き換え正規マッチング書き換え方法の例

Nginx の書き換え機能は、リダイレクトと同様に、URL アドレスを一時的または永続的に新しい場所...

jQueryは居住地を選択するためのドロップダウンボックスを実装します

居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...

MySQLはJSON内部フィールドを抽出し、数値としてダンプします

目次背景問題分析1. 属性値はJson形式であり、Json操作関数を使用して処理する必要があります。...

HTML ベース URL タグ

その機能はグローバル スタイルを設定することです。その後の相対パスはこれに基づきます: <im...

MySQL 最適化チュートリアル: 大規模なページングクエリ

目次背景制限の最適化最適化方法1. カバーインデックスを使用する2. サブクエリの最適化3. 遅延連...

Centos8 で yum を使用して mongodb 4.2 をインストールする方法

1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...

mysql bin-log ログファイルを sql ファイルに変換する方法

mysqlbinlogのバージョンを表示mysqlbinlog -V [--version] bin...

Ubuntu 20.04 に cuda10.1 をインストールする手順 (グラフィック チュートリアル)

インストール前の準備CUDA の主な目的はディープラーニングであり、現在主流のディープラーニングフレ...

TypeScript の条件型に関する詳細な読書と実践記録

目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...

ウェブのさまざまなフロントエンド印刷方法: CSS はウェブページの印刷スタイルを制御します

CSS は Web ページの印刷スタイルを制御します。 CSS を使用して印刷スタイルを制御します。...

UI を通じて Docker を管理する方法

Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...

Docker+Selenium Grid に基づく技術アプリケーションをテストするためのサンプル コード

Selenium Grid の紹介Selenium Grid のいくつかの新しい機能は、今後リリース...