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

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

主な機能は次のとおりです。

  1. 製品情報を追加する
  2. 製品情報を変更する
  3. 単一の製品を削除する
  4. 複数の製品を削除する
  5. カートを空にする
  6. 商品価格を降順で並べ替える
  7. 製品名で検索
  8. 商品の数量を増減する
  9. すべて選択 反転
  10. 選択した商品の合計価格を計算する

効果図は以下のとおりです。

関数がたくさんあるので、一つ一つ説明することはしません。まず、いくつかの主要な関数(追加、削除、変更、クエリ)のロジックについて説明し、最後にすべてのコードを載せます。

まず、製品機能の追加について見てみましょう

//まず、イベントを表示するためのボタンをバインドしましょう。[追加] をクリックすると、ポップアップ ウィンドウが表示されます <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 = 偽
            },

変更を加えた後、削除を記述しましょう

ボタン バインディング イベントを定義し、インデックス値を渡し、最後に splice はインデックスに基づいて項目を削除します。

ボタンバインディングイベントを定義し、インデックス値を渡し、最後にスプライスは下付き文字 <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 黒一色;
                    ディスプレイ: フレックス;
                    コンテンツの両端揃え: スペースの間;

                    p {
                        フロート: 左;
                        幅: 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 を返します
                })
            }

        }
    }
</スクリプト>

要約する

これで、vue を使用してショッピング カートのすべての機能を実装する方法についての説明は終了です。vue を使用してショッピング カートの機能を実装する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vuejs ベースのショッピングカート機能の実装
  • Vueはショッピングカート機能を実装します
  • Vueはショッピングモールのショッピングカート機能を実現
  • vuex で実装されたシンプルなショッピングカート機能の例
  • vue+vant-UIフレームワークは、ショッピングカートのチェックボックスの選択と選択解除機能を実現します。
  • Vue.jsで実装したショッピングカート機能の詳しい説明
  • Vuejsはショッピングカート機能を実装します
  • Vueで実装されたTaobaoショッピングカート機能の詳細説明
  • Vue.jsはシンプルなショッピングカート機能を実装します
  • Vue.jsでショッピングカート機能を開発する方法を詳しく説明します

<<:  mysql インストーラ コミュニティ 8.0.16.0 のインストールと構成のグラフィック チュートリアル

>>:  Linux システムで .sh ファイルを実行する方法

推薦する

SQL文のANDとORの実行順序で発生する問題

質問昨日、データベースSQLを書いているときに問題が発生しました。問題の根本は、SQL ステートメン...

Vueはページを更新するために3つの方法を使用する

プロジェクトを作成しているときに、ユーザーがアクションを実行し、特定の状態を変更し、ページを更新して...

Java を Mysql バージョン 8.0.18 に接続する方法の詳細な説明

JavaとMysql 8.0.18バージョンの接続方法については、参考までに具体的な内容は以下のとお...

WeChatアプレットがスネークゲームを実装

この記事では、参考までに、スネークゲームを実装するためのWeChatアプレットの具体的なコードを紹介...

ウェブデザインの概要

<br />1998年に最初の個人ページが誕生してから2008年の今日まで、デザイン業界...

Vue が 4 レベルのナビゲーションと検証コードを実装する方法の例

効果: まず5つのVueインターフェースを作成する1.home.vueページ <テンプレート&...

Linux の cut コマンドの説明

Linux や Unix の cut コマンドは、ファイルの各行から一部を切り取って標準出力に出力す...

はじめに: HTML の基本的なタグと属性の簡単な紹介

HTML はタグと属性で構成されており、これらを組み合わせてブラウザにページの表示方法を指示します。...

MySQL でサーバーのインストールを開始できない場合の解決策について簡単に説明します。

コンピュータに初めて MySQL をインストールする場合、通常このエラー メッセージは表示されません...

HTTP サーバーとクライアントのやり取りをシミュレートする Node.js+postman

目次1. NodeがHTTPサーバーを構築する2. HTTPサーバーがリクエストを取得する1. Po...

Linuxでファイルを削除してもスペースが解放されない問題の対処方法

問題の背景業務システムのサーバ監視システムからディスク使用率が90%に達したという早期警告通知が来た...

NFS サーバーの原理と、その構築、構成、展開の手順を簡単に分析します。

目次NFS サービスの概要NFS とは何ですか? NFS マウントの原則NFS サーバーはデータ転送...

Ajax の JavaScript ソリューションにおける parsererror エラー ケースの詳細な説明

ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...

React を使って小さなプログラムを書くための Remax フレームワークのコンパイル プロセス分析 (推奨)

Remax は、実行時に構文制限のないソリューションを採用した React を使用して小規模なプロ...

ElementUI のネストされたテーブルに基づいて複数選択を実装するためのサンプル コード

序文:私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...