1. ショッピングカートの例一連の学習が終わったら、ここでショッピングカートのケースを練習してみましょう。
全体的な効果は次のとおりです。 2. コードの実装<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> <script src="../js/vue.js"></script> <スタイル> テーブル{ 境界線: 1px 実線 #e9e9e9; 境界線の折りたたみ: 折りたたみ; 境界線の間隔: 0; } th、td{ パディング: 8px 16px; 境界線: 1px 実線 #e9e9e9; テキスト配置: 左; } th{ 背景色: #f7f7f7; 色: #5c6b77; フォントの太さ: 600; } </スタイル> </head> <本文> <div id="アプリ"> <div v-if="本の長さ"> <テーブル> <スレッド> <tr> <番目></番目> <th>書籍名</th> <th>発行日</th> <th>価格</th> <th>購入数量</th> <th>オペレーション</th> </tr> </スレッド> <t本文> <tr v-for="(book, index) 書籍内" :key="book"> <td>{{インデックス+1}}</td> <td>{{書籍名}}</td> <td>{{book.publish_date}}</td> <td>{{book.price | showPrice}}</td> <td> <button @click="decrease(index)" :disabled="book.count <= 0">-</button> {{book.count}} <button @click="増加(インデックス)">+</button> </td> <td> <button @click="removeClick(index)">削除</button> </td> </tr> </tbody> </テーブル> <p>合計金額: {{totalPrice | showPrice}}</p> </div> <h2 v-else>ショッピングカートは空です</h2> </div> <スクリプト> constアプリ = 新しいVue({ el: "#app", データ: { 書籍: {"name":"アルゴリズム入門", "publish_date":"2006-9", "price":20.00, "count": 0}, {"name":"UNIX プログラミングの芸術", "publish_date":"2006-2", "price":30.00, "count": 0}, {"name":"プログラミング技術", "publish_date":"2008-10", "price":40.00, "count": 0}, {"name":"コードコレクション", "publish_date":"2006-3", "price":50.00, "count": 0}, ]、 }, メソッド: { // 増加 + 減少(インデックス){ this.books[インデックス].count-=1 }, // 減らす- 増加(インデックス){ this.books[インデックス].count+=1 }, //ボタンを削除するremoveClick(index){ this.books.splice(インデックス、1) } }, 計算: { // 合計価格を計算する totalPrice(){ 合計価格を 0 にする for (let item of this.books){ 合計価格 += 商品価格 * 商品数 } 合計価格を返す } }, // 価格を小数点第2位までフィルタリングするフィルター フィルター: { 価格を表示(価格){ '¥' + price.toFixed(2) を返す } } }) </スクリプト> </本文> </html> 3. まとめv-for:ループ、 これで、Vue ショッピングカートのケース実践に関するこの記事は終了です。より関連性の高い Vue ショッピングカートの実践コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: HTML ウェブページにおけるさまざまなフォント形式の詳細
>>: MySQL ストアド プロシージャのクエリ コマンドの概要
1. はじめに:友人はシステム知識を学びたいと考えており、Apple のラップトップを使用していまし...
前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...
Nginx の書き換え機能は、リダイレクトと同様に、URL アドレスを一時的または永続的に新しい場所...
居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...
目次背景問題分析1. 属性値はJson形式であり、Json操作関数を使用して処理する必要があります。...
その機能はグローバル スタイルを設定することです。その後の相対パスはこれに基づきます: <im...
目次背景制限の最適化最適化方法1. カバーインデックスを使用する2. サブクエリの最適化3. 遅延連...
1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...
mysqlbinlogのバージョンを表示mysqlbinlog -V [--version] bin...
インストール前の準備CUDA の主な目的はディープラーニングであり、現在主流のディープラーニングフレ...
目次ジェネリック型での条件型の使用ツールタイプ脱出ポッド矢印関数で条件型を使用する型推論による条件型...
CSS は Web ページの印刷スタイルを制御します。 CSS を使用して印刷スタイルを制御します。...
Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...
Selenium Grid の紹介Selenium Grid のいくつかの新しい機能は、今後リリース...
ページの主要部分: <body> <ul id="メニュー"&...