Vueは書籍ショッピングカートの機能を実現

この記事の例では、書籍ショッピングカート機能を実現するためのVueの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

レンダリング

クリックすると購入数量を増やしたり減らしたり削除したりして合計金額が変わります

コード

<!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>
    <スタイル>
        テーブル{
            境界線: 1px 実線 #e9e9e9;
            境界線の折りたたみ: 折りたたみ;
            境界線の間隔: 0;
        }
        th、td{
            パディング: 8px 16px;
            境界線: 1px 実線 #e9e9e9;
            テキスト配置: 左;
        }
        th{
            背景色: #f7f7f7;
            色: #5c6b77;
            フォントの太さ: 600;
        }
    </スタイル>
</head>
<本文>
    <div id="app" v-cloak>
        <div v-if="本の長さ">
            <テーブル>
                <頭>
                    <tr>
                        <番目></番目>
                        <th>書籍名</th>
                        <th>発行日</th>
                        <th>価格</th>
                        <th>購入数量</th>
                        <th>オペレーション</th>
                    </tr>
                </thead>
                <t本文>
                    <tr v-for="(item, index) 書籍内">
                        <td>{{インデックス+1}}</td>
                        <td>{{アイテム名}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price | 表示価格}}</td>
                        <td>
                            <!-- ボタンが無効になっている場合は disabled が true になります -->
                            <button @click="reduce(index)" v-bind:disabled="item.count <= 1">-</button>
                            {{item.count}}
                            <button @click="増加(インデックス)">+</button>
                        </td>
                        <td><button @click="remove(index)">削除</button></td>
                    </tr>
                </tbody>
            </テーブル>
            <h2>合計金額: {{totalPrice | showPrice}}</h2>
        </div>
        <h2 v-else>ショッピングカートは空です</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <スクリプト>
        constアプリ = 新しいVue({
            el: "#app",
            データ：{
                書籍:
                    {
                        名称:「アルゴリズム入門」
                        日付: '2021-8-1',
                        価格: 85.00、
                        カウント: 1
                    },
                    {
                        題名: 『UNIXプログラミングの芸術』
                        日付: '2021-8-2',
                        価格: 69.00、
                        カウント: 1
                    },
                    {
                        名前: 「プログラミングパール」
                        日付: '2021-8-3',
                        価格: 35.00、
                        カウント: 1
                    },
                    {
                        タイトル: 「DOMプログラミングの芸術」
                        日付: '2021-8-4',
                        価格: 75.00、
                        カウント: 1
                    },
                    {
                        名前: 「Nodejs をシンプルに解説」
                        日付: '2021-8-5',
                        価格: 105.00、
                        カウント: 1
                    },
                ]、
                
            },
            方法:{
                減らす(インデックス){
                    this.books[インデックス].count--;
                },
                増加(インデックス){
                    this.books[インデックス].count++;
                },
                削除(インデックス){
                    this.books.splice(インデックス、1);

                },
            },
            計算:{
                // 計算属性に記述されたメソッドは、属性 totalPrice(){ として直接使用できます。
     //totalPrice = 0 とします。

                    // 1. 通常の for ループ // for (let i = 0; i < this.books.length; i++) {
                    // 合計価格 += this.books[i].count * this.books[i].price;
                    // }

                    // 2. よりシンプルなステップの通常の for ループ // for (let i in this.books) {
                    // 合計価格 += this.books[i].count * this.books[i].price;
                    // }

                    // 3. for(let item of this.books)
                    //for(let item of this.books){
                        // 合計価格 += アイテム数 * アイテム価格;
                    //
                    //totalPrice を返します。

     // 4. 高階関数の記述reduce
     // 変数を定義したり走査したりせずに結果を直接返します return this.books.reduce(function(pre, book){
                        pre + book.price * book.count を返します。
                    },0);
            },
            // フィルター:{
                価格を表示(価格){
                    "￥" + price.toFixed(2) を返します。
                }
            }
        })
    </スクリプト>
</本文>
</html>

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

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