この記事では、Vueを使用してショッピングカートの数量を変更する方法を紹介します。具体的な内容は次のとおりです。 効果画像:知識ポイント: 1. 計算プロパティ 実装コード:<!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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL マスタースレーブレプリケーションの役割と動作原理の詳細な説明
>>: VMware 仮想マシンのインストール win7 オペレーティング システム チュートリアル ダイアグラム
この記事では主に、echart を使用してパーセンテージを表示する Vue の円グラフデータ部分を紹...
目次インストール: 1. ファイアウォールの基本的な使い方2. ファイアウォールd-cmdを設定する...
Mysql5.5 デュアルマシン ホットスタンバイ実装 2つのMySQLをインストールするMySQ...
Vue プロジェクトを開発する場合、さまざまなコンポーネント ページを表示するために切り替えることが...
問題を見つける今日、仕事中に、ローカル データベースから仮想マシン CentOS 6.6 上のデータ...
現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...
JavaScript でポインターの位置を取得する方法は、イベント オブジェクトの pageX と ...
CentOS7 のデフォルトのデータベースは mariadb ですが、mysql を使っている人も多...
インデックス集約を使用しない MySQL クエリご存知のとおり、インデックスを追加することはクエリ速...
この記事はCentOS 7.3システム環境をベースに、MySQLとRedisのインストールと使用につ...
1. MySQLをダウンロードする公式サイトのダウンロードアドレス https://dev.mys...
これは、データベース サーバーが、接続が多すぎるのを避けるために、一定時間非アクティブな状態が続くと...
目次1. 基礎知識: 2. DHCPサーバーの設定: 1. サーバーのIPを確認する2. DHCP ...
まず依存関係をダウンロードします yarn sass-loader ノード sass を追加します次...
この記事では、RHEL8 のネットワーク サービスとネットワーク構成ツール、およびネットワーク ファ...