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 ストアド プロシージャのクエリ コマンドの概要

推薦する

ウェブデザインでよくある間違いのまとめ

Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...

MySQL データベースの詳細な説明 - 複数テーブル クエリ - 内部結合、外部結合、サブクエリ、相関サブクエリ

複数テーブルクエリ複数のテーブルから関連するクエリ結果を取得するには、単一の SELECT ステート...

CSS の flex と inline-flex の違いの詳細な説明

inline-flex は inline-block と同じです。内部要素用の display:fl...

MySQL データ定義言語 DDL の基本ステートメント

MySQL DDL ステートメントDDL、DMLとは何ですか。 DDL はデータ定義言語であり、CR...

ウェブページの読み込み進捗状況バーの詳細な説明(推奨)

(Web ページの読み込み中に、コンテンツが多すぎて読み込みと待機が続くことがあります。このとき、...

HTML の相対パス (Relative Path) と絶対パス (Absolute Path) の詳細な理解

私は 1 年以上 Java Web 開発に携わっており、HTML または JSP ページの作成は避け...

ウェブデザインにおけるキーワード設計手法の紹介

多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...

MySQLカスタム関数の原理と使用法の分析

この記事では、例を使用して MySQL カスタム関数の原理と使用方法を説明します。ご参考までに、詳細...

MySQL Innodb ストレージ構造と Null 値の保存の詳細な説明

背景:テーブルスペース: すべての INNODB データはテーブルスペース (共有テーブルスペース)...

Vue 初心者ガイド: 最初の Vue-cli スキャフォールディング プログラムの作成

1. Vue - 最初の vue-cli プログラムVueの開発はNodeJSに基づいています。実際...

CSS -webkit-box-orient: コンパイル後に垂直プロパティが失われる

1. 原因要件は 2 行を表示することであり、余分なテキストは 3 つのドットに置き換えられるため、...

Remレイアウトを使用して適応性を実現する

以前、モバイル適応に関する記事を書きました。非常に長く、内容が多すぎて読みづらいものでした。そこで、...

Vue の要素カレンダー コンポーネントを使用したサンプル コード

まず効果図を見てみましょう: 完全なコードは添付されています <テンプレート> <...

Vueデータ監視の原理の詳細な説明

<本文> <div id="ルート"> <h1&...

個人ブログシステムを構築するためのDockerの超シンプルな実装

Dockerをインストールするyumパッケージを最新バージョンに更新します: sudo yum up...