Vueは買い物数量を変更できるショッピングカートを実装します

Vueは買い物数量を変更できるショッピングカートを実装します

この記事では、Vueを使用してショッピングカートの数量を変更する方法を紹介します。具体的な内容は次のとおりです。

効果画像:

知識ポイント:

1. 計算プロパティ
2. フィルター

実装コード:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スタイル>
    テーブル {
        境界線の折りたたみ: 折りたたみ;
        境界線の間隔: 0;
        境界線: 1px 実線 #ccc;
    }
    
    td、
    番目 {
        パディング: 8px 16px;
        境界線: 1px 実線 #ccc;
        テキスト配置: 左;
    }
    
    番目 {
        背景色: #f7f7f7;
        色: #5c6b77;
    }
</スタイル>

<本文>
    <div id="ボックス">
        <div v-if="本の長さ">
            <テーブル>
                <頭>
                    <tr>
                        <番目></番目>
                        <th>書籍名</th>
                        <th>発行日</th>
                        <th>価格</th>
                        <th>購入数量</th>
                        <th>オペレーション</th>
                    </tr>
                </thead>
                <t本文>
                    <tr v-for="(item,index) 書籍内">
                        <td>{{item.id}}</td>
                        <td>{{アイテム名}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price | トプライス}}</td>
                        <td>
                            <button @click='down(index)' :disabled="item.aunt<=1">-</button> {{item.aunt}}
                            <button @click='add(index)'>+</button>
                        </td>
                        <td>
                            <button @click="remove(index)">削除</button>
                        </td>
                    </tr>
                </tbody>
            </テーブル>
            <h2>合計金額: {{getallprice | toprice}}</h2>
        </div>
        <h2 v-else>ショッピング情報がありません</h2>
    </div>
    <スクリプト>
        定数vm = 新しいVue({
            el: "#ボックス",
            データ: {
                本: [{
                    id: 1,
                    名前: "《vue.js 実戦》",
                    日付: "2010.2.4",
                    価格: 82.00、
                    叔母:1
                }, {
                    id: 2,
                    名前:「Javascript 練習」、
                    日付: "2010.2.4",
                    価格: 108.00、
                    叔母:1
                }, {
                    id: 3,
                    名前: "《html+css 練習》",
                    日付: "2010.2.4",
                    価格: 42.50、
                    叔母:1
                }, {
                    id: 4,
                    名前:「Axios Practice」、
                    日付: "2010.2.4",
                    価格: 82.00、
                    叔母:1
                }, {
                    id: 5,
                    名前: "jQuery 練習",
                    日付: "2010.2.4",
                    価格: 65.20,
                    叔母:1
                }, ]
            },
            メソッド: {
                追加(インデックス) {
                    this.books[インデックス].aunt++;
                },
                下(インデックス) {
                    this.books[index].aunt--;
                },
                削除(インデックス) {
                    this.books.splice(インデックス、1)
                },

            },
            計算: {
                全ての価格を取得する() {
                    すべてを 0 にします。
                    (i = 0 とします; i < this.books.length; i++) {
                        すべて += this.books[i].price * this.books[i].aunt
                    }
                    すべてを返す
                }
            },
            フィルター:
                toprice(価格) {
                    '¥' + price.toFixed(2) を返す
                },

            }
        })
    </スクリプト>
</本文>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vuejsは、完全なショッピングカートのサンプルコードを書く方法を段階的に教えてくれます
  • Vuejs ベースのショッピングカート機能の実装
  • Vueはショッピングカート機能を実装します
  • Vueはショッピングカートの小さなケースを実装します
  • Vueはショッピングモールのショッピングカート機能を実現
  • Vue はショッピングカートの合計価格計算を実現します
  • vuex で実装されたシンプルなショッピングカート機能の例
  • vue+vant-UIフレームワークは、ショッピングカートのチェックボックスの選択と選択解除機能を実現します。
  • Vue.jsで実装したショッピングカート機能の詳しい説明
  • Vuejsはショッピングカート機能を実装します

<<:  MySQL マスタースレーブレプリケーションの役割と動作原理の詳細な説明

>>:  VMware 仮想マシンのインストール win7 オペレーティング システム チュートリアル ダイアグラム

推薦する

Vueはechart円グラフの凡例のパーセンテージを表示するメソッドを実装します

この記事では主に、echart を使用してパーセンテージを表示する Vue の円グラフデータ部分を紹...

CentOS7 ファイアウォール操作コマンドの完全なリスト

目次インストール: 1. ファイアウォールの基本的な使い方2. ファイアウォールd-cmdを設定する...

Ubuntu は、Mysql+Keepalived の高可用性実装 (デュアルアクティブ ホットスタンバイ) を構築します。

Mysql5.5 デュアルマシン ホットスタンバイ実装 2つのMySQLをインストールするMySQ...

Vue でのルータービューコンポーネントの使用に関する詳細な説明

Vue プロジェクトを開発する場合、さまざまなコンポーネント ページを表示するために切り替えることが...

MySQL の起動時に InnoDB エンジンが無効になる問題の解決方法

問題を見つける今日、仕事中に、ローカル データベースから仮想マシン CentOS 6.6 上のデータ...

MySQLは現在の日付と時刻を取得する関数の例の詳細な説明

現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...

JavaScriptでポインターの位置を取得する方法を教えます

JavaScript でポインターの位置を取得する方法は、イベント オブジェクトの pageX と ...

CentOS 7 で yum を使用して MySQL 5.7.20 をインストールする最も簡単な方法

CentOS7 のデフォルトのデータベースは mariadb ですが、mysql を使っている人も多...

MySQLのSQL文はインデックスを使用しません

インデックス集約を使用しない MySQL クエリご存知のとおり、インデックスを追加することはクエリ速...

Docker に MySQL と Redis をインストールする方法

この記事はCentOS 7.3システム環境をベースに、MySQLとRedisのインストールと使用につ...

MySQL 8.x msi バージョンのインストール チュートリアル (画像とテキスト付き)

1. MySQLをダウンロードする公式サイトのダウンロードアドレス https://dev.mys...

一定時間後にNavicatがデータベースから自動的に切断される問題の解決方法

これは、データベース サーバーが、接続が多すぎるのを避けるために、一定時間非アクティブな状態が続くと...

LinuxでDHCPサーバーを構築する方法

目次1. 基礎知識: 2. DHCPサーバーの設定: 1. サーバーのIPを確認する2. DHCP ...

ReactプロジェクトにSCSSを導入する方法

まず依存関係をダウンロードします yarn sass-loader ノード sass を追加します次...

Linuxネットワーク構成ツールの使用

この記事では、RHEL8 のネットワーク サービスとネットワーク構成ツール、およびネットワーク ファ...