Vueでショッピングカートのすべての機能を実装する簡単な方法

//まず、イベントを表示するためのボタンをバインドしましょう。[追加] をクリックすると、ポップアップ ウィンドウが表示されます <button type="button" @click="xian">追加</button>

//戻り値は、disのデフォルト値falseを定義します
 シアン（）{
                if (!this.dis == false) {
                    this.dis = 偽
                } それ以外 {
                    this.dis = 真
                }
            },

           <button type="button" @click="tian">追加を確認する</button>

 //追加する製品情報を新しい配列にプッシュし、追加後にポップアップウィンドウを閉じます tian() {
                if (this.name == "" || this.county == "" || this.price == "") {
                    alert("製品情報は空欄にできません!")
                    偽を返す
                } それ以外 {

                    this.shopPings.push({
                        名前: this.name,
                        国: この国、
                        価格: this.price,
                        カウント: this.count,
                    })
                }
                this.name = "",
                    this.countrty = "",
                    this.price = "",
                    this.count = ""
                this.dis = 偽
            },

//ボタンバインディングイベントを定義します <button type="button" @click="xiugai">変更を確認</button>
   //ショッピングカート内の商品情報を変更し、変更後にポップアップウィンドウを閉じます。xiugai() {
                コンソールログ(this.int)
                インデックス = this.int とする
                console.log(this.name, this.price, this.count, )
                this.shopPings[index].name = this.name
                this.shopPings[index].price = this.price
                this.shopPings[index].county = this.county
                this.shopPings[インデックス].count = this.count

                this.dis1 = 偽
            },

ボタンバインディングイベントを定義し、インデックス値を渡し、最後にスプライスは下付き文字 <button @click="del(index)">Delete</button> に従ってアイテムを削除します。	
  del(インデックス) {
                this.shopPings.splice(インデックス、1);
            },

 すべて削除() {
                this.shopPings = []
            },

// 入力値を返します // 入力ボックスを定義し、値をバインドし、キーボードの Enter イベントを設定し、検索イベントをバインドします <input type="text" placeholder="検索する製品の名前を入力してください" v-model="input_value" @keyup.13="search">

//まずは判定を行います。検索ボックスが空の場合、空にできないというメッセージが表示されます。 //次に、検索用の配列内の各アイテムの名前を取得します。該当する商品名がない場合は、該当する商品がないことを通知します。 //最後に、配列フィルターをフィルタリングし、検索ボックスに入力された商品名とショッピングカート内の商品名を比較して該当する商品を見つけます。 search() {
                if (!this.input_value) {
                    アラートを返す('コンテンツを入力してください')
                }
                もし （
                    this.shopPings.every((v) => {
                        v.name.indexOf(この入力値) == -1
                    })
                ）{
                    this.input_value = ''
                    アラートを返す('そのような製品はありません')
                }
                this.shopPings = this.shopPings.filter((v) => {
                    v.name.replace(this.input_value, this.input_value)
                    v.name.indexOf(this.input_value) != -1 を返します
                })
            }

<テンプレート>
    <div class="shopCar">
        <ヘッダー>

            <button type="button" @click="delSelect">一括削除</button>
            <button type="button" @click="alldel">ショッピングカートをクリア</button>
            <button type="button" @click="xian">追加</button>
            <button type="button" @click="jiang">並べ替え</button>
            <input type="text" placeholder="検索したい製品の名前を入力してください" v-model="input_value" @keyup.13="search">
            <div class="xiu" v-show="dis1">
                <input type="text" placeholder="名前" v-model="名前">
                <input type="text" placeholder="価格" v-model="価格">
                <input type="text" placeholder="数量" v-model="count">
                <input type="text" placeholder="Origin" v-model="county">

                <button type="button" @click="xiugai">変更を確認</button>
            </div>
            <div class="add" v-show="dis">
                <input type="text" placeholder="名前" v-model="名前">
                <input type="text" placeholder="価格" v-model="価格">
                <input type="text" placeholder="数量" v-model="count">
                <input type="text" placeholder="Origin" v-model="county">

                <button type="button" @click="tian">追加を確認する</button>
            </div>
        </ヘッダー>
        <メイン>
            <ul>
                <li>
                    <p><input type="チェックボックス" v-model="allChecked">
                        すべて選択</p>
                    <p>名前</p>
                    <p>起源</p>
                    <p>数量</p>
                    <p>単価</p>
                    <p>小計</p>
                    <p>操作</p>
                </li>
                <li v-for="(item,index) in shopPings" :key="index">
                    <p><input type="checkbox" v-model="item.checked">{{item.id}}</p>
                    <p>{{アイテム名}}</p>
                    <p>{{item.countrty}}</p>
                    <p><button type="button" @click="add(item)">+</button>
                        <input type="text" v-model="item.count" style="width:20px">
                        <button type="button" @click="remove(item)">-</button>
                    </p>
                    <p>{{item.price}}</p>
                    <p>{{item.price*item.count |サフィックス}}</p>
                    <p>
                        <button type="button" @click="xiu(index)"> 変更</button>

                        <button @click="del(index)">削除</button>
                    </p>
                </li>
            </ul>
        </メイン>
        <フッター>
            <p>合計 {{state.sum |suffix}}</p>
        </フッター>
    </div>
</テンプレート>
<スタイル スコープ lang="scss">
    .shopCar {
        幅: 1000ピクセル;
        境界線: 2px 黒一色;
        マージン: 100px 自動;
        オーバーフロー:自動;

        ヘッダー {
            ディスプレイ: フレックス;
            コンテンツの両端揃え: スペースの間;
            幅: 600ピクセル;
            高さ: 27px;
            オーバーフロー: 非表示;

            。追加 {
                幅: 400ピクセル;
                背景: #e4e1e1;
                位置: 絶対;
                左: 39%;
                上位: 40%

                入力{
                    表示: ブロック;
                    マージン: 20px 自動;

                }

                ボタン {
                    表示: ブロック;
                    マージン: 0 自動;
                }
            }

            .xiu {
                幅: 400ピクセル;
                背景: #e4e1e1;
                位置: 絶対;
                左: 39%;
                上位: 40%

                入力{
                    表示: ブロック;
                    マージン: 20px 自動;

                }

                ボタン {
                    表示: ブロック;
                    マージン: 0 自動;
                }
            }
        }

        主要 {
            // 高さ: 400px;
            上マージン: 10px;

            ul {

                li {
                    高さ: 78px;
                    border-bottom: 2px 黒一色;
                    ディスプレイ: フレックス;
                    コンテンツの両端揃え: スペースの間;

                    ｐ {
                        フロート: 左;
                        幅: 140ピクセル;
                        高さ: 27px;
                        境界線: 2px 黒一色;
                        テキスト配置: 中央;
                    }
                }
            }
        }

        フッター {
            高さ: 50px;
            上マージン: 13px;
            行の高さ: 50px;
        }
    }
</スタイル>
<スクリプト>
    const shopData = [{
            id: "",
            名前:「靴」、
            国:「山西省」、
            カウント: 1,
            価格: 800,
        },
        {
            id: "",
            名前:「キャビネット」、
            国:「北京」、
            カウント: 1,
            価格: 3200、
        },
        {
            id: "",
            名前: 「口紅」、
            国:「河北省」、
            カウント: 2,
            価格: 200,
        },
        {
            id: "",
            名前:「ハンバーガー」、
            国:「河南省」、
            カウント: 2,
            価格: 200,

        },

    ]

    エクスポートデフォルト{
        //フィルター: {
            接尾辞(値) {
                価格 = 数値(値)とする
                `￥${price.toFixed(2)}` を返す
                //金額の前に￥記号を挿入し、小数点を2桁として定義します}
        },
        計算: {

            //すべて選択 allChecked: {
                得る（） {
                    const チェック済み = this.shopPings.filter((item) => item.checked)
                    checks.length === this.shopPings.length を返します
                },
                設定(状態) {
                    // コンソール.log(状態)
                    this.shopPings.map((item) => {
                        item.checked = 状態
                        返品商品
                    })
                }
            },
            //小計計算 totalPrice: function () {
                var 合計 = 0;
                (var i = 0; i < this.checkList.length; i++) {
                    var item = this.checkList[i];
                    合計 += アイテムの価格 * アイテムの数;
                }
                total.toLocaleString() を返します。
            },
            //選択したアイテムの合計価格を計算する state() {
                const チェック済み = this.shopPings.filter((item) => item.checked)
                const チェック済み = チェック済み.長さ === this.shopPings.長さ
                定数sum = チェック済み.reduce((a, b) => {
                    a + b.count * b.price を返します。
                }, 0)
                戻る {
                    カウント: チェック数.長さ、
                    和
                }
            },
        },
        データ（） {
            戻る {
                ショッピングPings: [],
                dis: false, //送信を確認 dis1: false, //変更を確認 id: "",
                name: "", //名前 price: "", //単価 count: "", //数量 counrty: "", //origin input_value: "", //クエリボックスに入力された値}
        },
        マウント() {
            window.fetch("/").then(() => {
                this.shopPings = shopData.map((item) => {
                    項目がチェックされている = false
                    返品商品
                })
            })
        },
        メソッド: {
            //製品xian()を追加{
                if (!this.dis == false) {
                    this.dis = 偽
                } それ以外 {
                    this.dis = 真
                }
            },
            //tian() の追加を確認 {
                if (this.name == "" || this.county == "" || this.price == "") {
                    alert("製品情報は空欄にできません!")
                    偽を返す
                } それ以外 {

                    this.shopPings.push({
                        名前: this.name,
                        国: この国、
                        価格: this.price,
                        カウント: this.count,
                    })
                }
                this.name = "",
                    this.countrty = "",
                    this.price = "",
                    this.count = ""
                this.dis = 偽
            },

            //商品を削除する del(index) {
                this.shopPings.splice(インデックス、1);
            },

            //選択した項目を削除する delSelect() {
                this.shopPings = this.shopPings.filter((item) => {
                    チェックされている場合
                        返品商品
                    }
                })
            },
            //すべて削除 alldel() {
                this.shopPings = []
            },
            //購入を減らすremove(data) {
                データ数 > 0 の場合
                    データ.count--
                }
                (データ数 === 0)の場合{
                    データ.チェック済み = false
                }
            },
            //購入を追加 add(data) {
                データ.count++
            },
            //製品xiu(i)を変更する{
                this.int = i
                if (!this.dis1 == false) {
                    this.dis1 = 偽
                } それ以外 {
                    this.dis1 = 真
                }
            },
            // 変更を確認する xiugai() {
                コンソールログ(this.int)
                インデックス = this.int とする
                console.log(this.name, this.price, this.count, )
                this.shopPings[index].name = this.name
                this.shopPings[index].price = this.price
                this.shopPings[index].county = this.county
                this.shopPings[インデックス].count = this.count

                this.dis1 = 偽
            },
            //降順jiang() {
                this.shopPings.sort((a, b) => {
                    // データに基づいて並べ替える return a.price - b.price;
                })
            },
            検索（） {
                if (!this.input_value) {
                    アラートを返す('コンテンツを入力してください')
                }
                もし （
                    this.shopPings.every((v) => {
                        v.name.indexOf(この入力値) == -1
                    })
                ）{
                    this.input_value = ''
                    アラートを返す('そのような製品はありません')
                }
                this.shopPings = this.shopPings.filter((v) => {
                    v.name.replace(this.input_value, this.input_value)
                    v.name.indexOf(this.input_value) != -1 を返します
                })
            }

        }
    }
</スクリプト>