Vue.jsフレームワークはショッピングカート機能を実装します

Vue.jsフレームワークはショッピングカート機能を実装します

この記事では、ショッピングカートを実装するためのVue.jsフレームワークの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html lang="ja" xmlns:v-on="http://www.w3.org/1999/xhtml">

    <ヘッド>
        <メタ文字セット="UTF-8">
        <title>タイトル</title>
        <script src="../lib/vue.min.js"></script>
    </head>

    <本文>

        <div id="app" style="position: relative;left: 30%">
            <テーブルセルパディング="10">
                <頭>
                    <th><input type="checkbox" v-model="cb" v-on:click="allSelect">すべて選択</th>
                    <th>名前</th>
                    <th>単価</th>
                    <th>数量</th>
                    <th>金額</th>
                    <th>オペレーション</th>
                </thead>

                <t本文>
                    <tr v-for="情報内のx">
                        <td><input type="checkbox" v-model="x.bol" v-on:click="sign()"></td>
                        <td>{{x.name}}</td>
                        <td>{{x.価格}}</td>
                        <td><input type="number" v-model="x.num" min="0" style="width: 50px;text-align: center" v-on:click="count(x)" v-on:change="count(x)"></td>
                        <td>{{x.total}}</td>
                        <td><button v-on:click="del(x)">削除</button></td>
                    </tr>
                </tbody>
            </テーブル>

            <Br>
            <p>合計金額: {{all}}</p>
        </div>

        <スクリプト>
            var vm = 新しい Vue({
                el: "#app",
                データ: {
                    すべて: 0,
                    cb: 偽、
                    情報: [{
                        bol: 偽、
                        名前: "iphone7",
                        価格: 6000、
                        番号: 1,
                        合計: 6000
                    }, {
                        bol: 偽、
                        名前: "Honor 6x",
                        価格: 1200、
                        番号: 1,
                        合計: 1200
                    }, {
                        bol: 偽、
                        名前: 「デル ラップトップ」、
                        価格: 4000、
                        番号: 1,
                        合計: 4000
                    }]
                },
                メソッド: {
                    //単価計算 count: function(obj) {
                        for(var i = 0; i < this.info.length; i++) {
                            //
                            if(this.info[i] == obj) {
                                this.info[i].total = obj.price * obj.num;
                            }
                            //選択した場合、合計金額を計算します if(obj.bol) {
                                this.allSelect();
                            }
                        }
                    },
                    //削除 del: function(obj) {
                        this.info.splice(this.info.indexOf(obj), 1)
                        this.allCount();
                    },

                    //単一選択記号: function() {
                        this.allCount();
                    },
                    //すべて選択allSelect: function() {

                        for(var i = 0; i < this.info.length; i++) {
                            this.info[i].bol = this.cb;
                        }
                        this.allCount();
                    },
                    //合計金額を計算する allCount: function() {
                        // 合計金額を計算するたびに、これをクリアする必要があります。all = 0;
                        for(var i = 0; i < this.info.length; i++) {
                            //選択した製品を計算する if(this.info[i].bol) {
                                this.all += this.info[i].total;
                            }
                        }
                    }

                }
            })
        </スクリプト>
    </本文>

</html>

効果画像:

その他の記事については、「Vue.js フロントエンドコンポーネント学習チュートリアル」をクリックして学習し、読むことができます。

vue.js コンポーネントのチュートリアルについては、特別な vue.js コンポーネント学習チュートリアルをクリックして学習してください。

Vue 学習チュートリアルの詳細については、特別トピック「Vue 実践チュートリアル」をお読みください。

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

以下もご興味があるかもしれません:
  • Vue.jsはシンプルなショッピングカート機能を実装します
  • vue.js をベースにしたショッピングカートの実装
  • vue.js ショッピングカートに製品コンポーネントを追加する方法
  • Vue.jsでショッピングカート機能を開発する方法を詳しく説明します
  • Vue.jsで実装したショッピングカート機能の詳しい説明
  • Vue.js はモバイル ショッピング カート インターフェースを構築します

<<:  Linux での nginx のインストール、展開、使用方法の詳細な説明

>>:  MySQLは遅いSQLを開始し、原因を分析します

推薦する

Vue の高度な構築プロパティの詳細な説明

目次1. ディレクティブカスタムディレクティブ2. ミックスイン3. 継承を拡張する4. 提供して注...

MySQLソートにおけるCASE WHENの使用例

序文以前のプロジェクトでは、SQL の CASE WHEN ソート関数が使用されました。ではブログメ...

JSのアンカーリンクをクリックするとスムーズにスクロールし、自由にトップ位置に調整できます。

アンカーリンクをクリックするとスムーズにスクロールし、自由にトップ位置に調整できます。 1. アンカ...

Linux で実行中のバックグラウンド プログラムを表示および終了する方法

Linux タスク管理 - バックグラウンド実行と終了fg、bg、ジョブ、&、ctrl + ...

SQL ファジー クエリ レポート: ORA-00909: パラメータの数が無効です。解決策

あいまいクエリにOracleデータベースを使用する場合、コンソール エラーは次の図に表示されます。理...

MySQL はどのようにしてマスターとスレーブの一貫性を確保するのでしょうか?

目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...

リモート接続を許可するようにMySQLを変更する方法

MySQLリモート接続の問題に関しては、会社で働いているときに誰かのコンピュータに保存されているMy...

Ubuntu システムにおける Mysql ERROR 1045 (28000): ユーザー root@localhost へのアクセスが拒否される問題の解決方法

最初の方法: skip-grant-tables: 非常に便利なmysql起動パラメータ非常に便利な...

Vueはカルーセルのフレームレート再生を実装します

この記事の例では、カルーセルのフレームレート再生を実現するためのVueの具体的なコードを参考までに共...

docker run 起動パラメータ コマンドを表示する方法 (推奨)

runlike を使用してコンテナの docker run 起動パラメータを表示します。 pipを...

case when文のエラー問題の詳細な説明

序文MySQL データベースでは、if else のような判断演算を使用することがあります。では、M...

MySQLはPartition関数を使用して水平分割戦略を実装します。

目次1件のレビュー2 水平分割の5つの戦略2.1 ハッシュ2.2 範囲2.3. キー2.4. リスト...

JavaScript 状態コンテナ Redux の詳細な説明

目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...

Vueはズームイン、ズームアウト、ドラッグ機能を実装しています

この記事では、参考までに、ズームインとズームアウトのドラッグ機能を実現するためのVueの具体的なコー...

jQuery で従業員管理登録ページを実装する

この記事では、従業員管理登録ページを実装するためのjQueryの具体的なコードを例として紹介します。...