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>
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/jquery-3.6.0.js" type="text/javascript"></script>
    <スタイル タイプ="text/css">
        * {
            パディング: 0;
            マージン: 0
        }
        
        {
            テキスト装飾: なし;
        }
        。容器 {
            幅: 500ピクセル;
            マージン: 10px 自動;
        }
        
        。タイトル {
            幅: 500ピクセル;
            高さ: 50px;
            テキスト配置: 中央;
            行の高さ: 50px;
            フォントサイズ: 20px;
            背景色: 淡いターコイズ;
        }
        
        。アイテム {
            位置: 相対的;
            高さ: 50px;
            border-bottom: 1px 実線 paleturquoise;
        }
        
        .item画像{
            フロート: 左;
            幅: 100ピクセル;
            高さ: 50px;
        }
        
        .アイテム .価格 {
            位置: 絶対;
            フロート: 左;
            幅: 120ピクセル;
            左マージン: 10px;
            上: 15px;
            左: 100px;
        }
        
        .item .change {
            位置: 絶対;
            左: 220px;
            上: 15px;
            フロート: 左;
            幅: 200ピクセル;
        }
        
        .change {
            フロート: 左;
            表示: ブロック;
            幅: 20px;
            高さ: 20px;
            フォントサイズ: 18px;
            テキスト配置: 中央;
            行の高さ: 20px;
            背景色: #ccc;
        }
        
        .change入力{
            フロート: 左;
            幅: 50px;
            マージン: 0 5px;
        }
        
        .item .del {
            位置: 絶対;
            上: 8px;
            左: 420px;
            色: 赤;
            フォントサイズ: 24px;
        }
        
        .item .del:hover {
            上: 0;
            高さ: 50px;
            背景色: 青;
        }
        
        。合計 {
            位置: 相対的;
            幅: 500ピクセル;
            高さ: 50px;
            背景色: コーンフラワーブルー;
        }
        
        .合計スパン{
            位置: 絶対;
            上: 14px;
            左: 250px;
        }
        
        .合計スパンem{
            色: 赤;
            フォントスタイル: 通常;
            フォントサイズ: 20px;
        }
        
        .totalボタン{
            位置: 絶対;
            上: 8px;
            左: 400px;
            幅: 50px;
            高さ: 35px;
            境界線の半径: 25%;
            境界線: なし;
            アウトライン: なし;
            背景色: トマト;
        }
    </スタイル>
 
</head>
<本文>
    <div id="アプリ">
 
  <div>
    <div class="コンテナ">
        <マイカート></マイカート>
    </div>
  </div>
  
    </div>
    <script type="text/javascript">
   // 3 つのサブコンポーネント var CartTitle = {
            プロパティ: ['uname'],
            テンプレート: `<div class="title">{{uname}} の製品</div>`
        }
        var カートリスト = {
            プロパティ: ['リスト'],
            テンプレート: ` <div class="list">
                    <div class="item" :key="item.id" v-for="リスト内のアイテム">
                        <img :src="item.img" alt="">
                        <div class="price">{{item.price}}円/個</div>
                        <div class="change">
                            <a href="" @click.prevent=" sub(item.id)">-</a>
                            <input type="text" class="num" :value="item.num" @blur="changenum(item.id,$event)">
                            <a href="" @click.prevent=" add(item.id)">+</a>
                        </div>
                        <div class="del" @click="del(item.id)">×</div>
                    </div>
                </div>
                    `、
            メソッド: {
                // 削除するIDを親コンポーネントに渡す
                del: 関数(id) {
                    // コンソールログ(id);
                    this.$emit("del-cart", id);
                },
                // フォーム入力の数を変更する changenum: function(id, event) {
                    //console.log(id、イベントターゲット値);
                    // 親コンポーネントに渡して数量を変更します this.$emit('change-num', {
                        id: id、
                        数値: イベントターゲット値
                    })
                },
                // マイナスボタンをクリックする sub: function(id) {
                    this.$emit('sub-num', id);
                },
                //プラスボタンをクリックする add: function(id) {
                    this.$emit('add-num', id);
                }
            }
        }
        var カート合計 = {
                プロパティ: ['リスト'],
                テンプレート: `<div class="total">
                    <span>合計金額: <em>{{total}}</em>￥</span>
                    <button>チェックアウト</button>
                </div>`,
                計算: {
                    合計: 関数() {
                        var 合計 = 0;
                        this.list.forEach(item => {
                            合計 += アイテムの価格 * アイテムの番号;
                        });
                        合計を返します。
                    }
                }
            }
            // 親コンポーネントを定義する Vue.component('my-cart', {
            データ: 関数() {
                戻る {
                    uname: '私',
                    リスト: [{
                        id: 1,
                        名前:「アンタシューズ」
                        価格: 260,
                        番号: 1,
                        画像: 'img/a.jpg'
                    }, {
                        id: 2,
                        名前:「ハイアール給湯器」
                        価格: 2000,
                        番号: 1,
                        画像: 'img/hai.jpg'
                    }, {
                        id: 3,
                        名前: 'iphone',
                        価格: 7000、
                        番号: 1,
                        画像: 'img/iphone.jpg'
                    }, {
                        id: 4,
                        名称:「Huawei携帯電話」
                        価格: 4500、
                        番号: 1,
                        画像: 'img/h.jpg'
                    }]
                }
            },
            テンプレート: `<div class="mycart">
                <カートタイトル:uname="uname"></カートタイトル>
                <cart-list :list="リスト" @del-cart="delcart($event)" @change-num="changeNum($event)" @sub-num="subnum($event)" @add-num="addnum($event)"></cart-list>
                <cart-total :list="リスト"></cart-total>
                </div>`,
            コンポーネント:
                'カートタイトル': カートタイトル、
                'カートリスト': カートリスト、
                'カート合計': カート合計、
            },
            メソッド: {
                delcart: 関数(id) {
                    // ID に応じてリスト内の対応するデータを削除します // 1. ID に対応するデータのインデックスを検索します var index = this.list.findIndex(item => {
                        item.id == id を返します。
                    });
                    // 2. インデックスに従って対応するデータを削除します。this.list.splice(index, 1);
                },
                // リスト内の番号 num を id に応じて変更します
                changeNum: 関数(val) {
                    //コンソールログ(val);
                    this.list.some(item => {
                        （item.id == val.id）の場合{
                            アイテム番号 = 値番号;
                        }
                    })
                },
                // 数値を減らすためのマイナス記号
                サブナンバー: 関数(イベント) {
                    // console.log(event); event はクリックされた ID 番号です this.list.some(item => {
                        （item.id == イベント && item.num > 0）の場合{
                            アイテム.num--;
                        }
                    })
                },
                // プラス記号は数値を増加させます
                addnum: 関数(イベント) {
                    this.list.some(item => {
                        if (item.id == イベント) {
                            アイテム.num++;
                        }
                    })
                }
            }
        });
        var vm = 新しい Vue({
            el: "#app",
            データ： {
 
            }
        });
 
    
    </スクリプト>
    
</本文>
</html>

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

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