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 を応援していただければ幸いです。

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