Vueは買い物数量を変更できるショッピングカートを実装します

Vueは買い物数量を変更できるショッピングカートを実装します

この記事では、Vueを使用してショッピングカートの数量を変更する方法を紹介します。具体的な内容は次のとおりです。

効果画像:

知識ポイント:

1. 計算プロパティ
2. フィルター

実装コード:

<!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>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スタイル>
    テーブル {
        境界線の折りたたみ: 折りたたみ;
        境界線の間隔: 0;
        境界線: 1px 実線 #ccc;
    }
    
    td、
    番目 {
        パディング: 8px 16px;
        境界線: 1px 実線 #ccc;
        テキスト配置: 左;
    }
    
    番目 {
        背景色: #f7f7f7;
        色: #5c6b77;
    }
</スタイル>

<本文>
    <div id="ボックス">
        <div v-if="本の長さ">
            <テーブル>
                <頭>
                    <tr>
                        <番目></番目>
                        <th>書籍名</th>
                        <th>発行日</th>
                        <th>価格</th>
                        <th>購入数量</th>
                        <th>オペレーション</th>
                    </tr>
                </thead>
                <t本文>
                    <tr v-for="(item,index) 書籍内">
                        <td>{{item.id}}</td>
                        <td>{{アイテム名}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price | トプライス}}</td>
                        <td>
                            <button @click='down(index)' :disabled="item.aunt<=1">-</button> {{item.aunt}}
                            <button @click='add(index)'>+</button>
                        </td>
                        <td>
                            <button @click="remove(index)">削除</button>
                        </td>
                    </tr>
                </tbody>
            </テーブル>
            <h2>合計金額: {{getallprice | toprice}}</h2>
        </div>
        <h2 v-else>ショッピング情報がありません</h2>
    </div>
    <スクリプト>
        定数vm = 新しいVue({
            el: "#ボックス",
            データ: {
                本: [{
                    id: 1,
                    名前: "《vue.js 実戦》",
                    日付: "2010.2.4",
                    価格: 82.00、
                    叔母:1
                }, {
                    id: 2,
                    名前:「Javascript 練習」、
                    日付: "2010.2.4",
                    価格: 108.00、
                    叔母:1
                }, {
                    id: 3,
                    名前: "《html+css 練習》",
                    日付: "2010.2.4",
                    価格: 42.50、
                    叔母:1
                }, {
                    id: 4,
                    名前:「Axios Practice」、
                    日付: "2010.2.4",
                    価格: 82.00、
                    叔母:1
                }, {
                    id: 5,
                    名前: "jQuery 練習",
                    日付: "2010.2.4",
                    価格: 65.20,
                    叔母:1
                }, ]
            },
            メソッド: {
                追加(インデックス) {
                    this.books[インデックス].aunt++;
                },
                下(インデックス) {
                    this.books[index].aunt--;
                },
                削除(インデックス) {
                    this.books.splice(インデックス、1)
                },

            },
            計算: {
                全ての価格を取得する() {
                    すべてを 0 にします。
                    (i = 0 とします; i < this.books.length; i++) {
                        すべて += this.books[i].price * this.books[i].aunt
                    }
                    すべてを返す
                }
            },
            フィルター:
                toprice(価格) {
                    '¥' + price.toFixed(2) を返す
                },

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

</html>

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

以下もご興味があるかもしれません:
  • Vuejsは、完全なショッピングカートのサンプルコードを書く方法を段階的に教えてくれます
  • Vuejs ベースのショッピングカート機能の実装
  • Vueはショッピングカート機能を実装します
  • Vueはショッピングカートの小さなケースを実装します
  • Vueはショッピングモールのショッピングカート機能を実現
  • Vue はショッピングカートの合計価格計算を実現します
  • vuex で実装されたシンプルなショッピングカート機能の例
  • vue+vant-UIフレームワークは、ショッピングカートのチェックボックスの選択と選択解除機能を実現します。
  • Vue.jsで実装したショッピングカート機能の詳しい説明
  • Vuejsはショッピングカート機能を実装します

<<:  MySQL マスタースレーブレプリケーションの役割と動作原理の詳細な説明

>>:  VMware 仮想マシンのインストール win7 オペレーティング システム チュートリアル ダイアグラム

推薦する

Docker JVM メモリ使用量の表示

1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...

Firefox で Flash を再生するためのオブジェクトとパラメータの書き方

コードをコピーコードは次のとおりです。 <object classid="clsid...

HTMLにスクリプトを追加する2つの方法と注意点

HTML に <script> スクリプトを追加する方法: 1. HTMLにJavaSc...

NavicatがLinuxサーバー上のMySQLに接続できない問題を解決する

最初は悲しい気持ちになりました。スクリーンショットは以下の通りです。 少し苦労しましたが、解決策は次...

Windows サーバー ファイルをローカルにバックアップする方法、Windows サーバー データ バックアップ ソリューション

重要なデータはバックアップする必要があり、リアルタイムでバックアップする必要があります。そうしないと...

Vue の計算プロパティの詳細な説明

目次補間式方法計算された要約する今日は、Vue の計算プロパティについてお話ししましょう。計算プロパ...

Linux システムで Tomcat を自動的に起動するための設定方法の紹介

1. /etc/init.d ディレクトリに入ります: cd /etc/init.d 2. tomc...

Vueライフサイクルの詳細な説明

目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...

MySQL Group by最適化の詳細な説明

目次標準的な実行プロセス最適化並べ替えを削除並べ替え成し遂げる要約する標準の Group by ステ...

Linux でパスワードの有効期限を表示および設定する方法

適切な設定を行うことで、Linux ユーザーにパスワードを定期的に変更させることができます。パスワー...

Vue でルーティング遷移効果を実装する 4 つの方法

Vue ルーター トランジションは、Vue プログラムにパーソナライズされたエフェクトをすばやく簡単...

Linux のスクリーンコマンドとその使い方

画面紹介Screen は、コマンドライン端末切り替え用に GNU プロジェクトによって開発されたフリ...

MySQL の NOT IN 充填ピットの NULL 列の問題の解決方法

以前、会社で小さな機能に取り組んでいたとき、特定の状況でデータがいくつあるかを数えてから問題を修正し...

MySQL でデータベースを作成した後、ユーザー 'root'@'%' によるデータベース 'xxx' へのアクセスが拒否される問題を解決する

序文最近、仕事で問題が発生しました。データベースを作成した後、データベースに接続するときにエラーが発...

mysql サブクエリと結合テーブルの詳細

目次1. サブクエリとは何ですか? 2. 自己結合3. 自然な結合4. 外部接続1. サブクエリとは...