この記事では、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 オペレーティング システム チュートリアル ダイアグラム
1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...
コードをコピーコードは次のとおりです。 <object classid="clsid...
HTML に <script> スクリプトを追加する方法: 1. HTMLにJavaSc...
最初は悲しい気持ちになりました。スクリーンショットは以下の通りです。 少し苦労しましたが、解決策は次...
重要なデータはバックアップする必要があり、リアルタイムでバックアップする必要があります。そうしないと...
目次補間式方法計算された要約する今日は、Vue の計算プロパティについてお話ししましょう。計算プロパ...
1. /etc/init.d ディレクトリに入ります: cd /etc/init.d 2. tomc...
目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...
目次標準的な実行プロセス最適化並べ替えを削除並べ替え成し遂げる要約する標準の Group by ステ...
適切な設定を行うことで、Linux ユーザーにパスワードを定期的に変更させることができます。パスワー...
Vue ルーター トランジションは、Vue プログラムにパーソナライズされたエフェクトをすばやく簡単...
画面紹介Screen は、コマンドライン端末切り替え用に GNU プロジェクトによって開発されたフリ...
以前、会社で小さな機能に取り組んでいたとき、特定の状況でデータがいくつあるかを数えてから問題を修正し...
序文最近、仕事で問題が発生しました。データベースを作成した後、データベースに接続するときにエラーが発...
目次1. サブクエリとは何ですか? 2. 自己結合3. 自然な結合4. 外部接続1. サブクエリとは...