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 ストアド プロシージャのクエリ コマンドの概要
Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...
複数テーブルクエリ複数のテーブルから関連するクエリ結果を取得するには、単一の SELECT ステート...
inline-flex は inline-block と同じです。内部要素用の display:fl...
MySQL DDL ステートメントDDL、DMLとは何ですか。 DDL はデータ定義言語であり、CR...
(Web ページの読み込み中に、コンテンツが多すぎて読み込みと待機が続くことがあります。このとき、...
私は 1 年以上 Java Web 開発に携わっており、HTML または JSP ページの作成は避け...
多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...
この記事では、例を使用して MySQL カスタム関数の原理と使用方法を説明します。ご参考までに、詳細...
背景:テーブルスペース: すべての INNODB データはテーブルスペース (共有テーブルスペース)...
1. Vue - 最初の vue-cli プログラムVueの開発はNodeJSに基づいています。実際...
1. 原因要件は 2 行を表示することであり、余分なテキストは 3 つのドットに置き換えられるため、...
以前、モバイル適応に関する記事を書きました。非常に長く、内容が多すぎて読みづらいものでした。そこで、...
まず効果図を見てみましょう: 完全なコードは添付されています <テンプレート> <...
<本文> <div id="ルート"> <h1&...
Dockerをインストールするyumパッケージを最新バージョンに更新します: sudo yum up...