この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。具体的な内容は次のとおりです。 HTML ホームページ <!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> <link rel="スタイルシート" href="/css/index.css" > </head> <本文> <div id="アプリ"> <div v-if="本.length != 0"> <テーブル> <頭> <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="decrement(index)" :disabled="item.count <= 1">-</button> {{item.count}} <button @click="increment(index)">+</button> </td> <td><button @click="removeHandle(index)">削除</button></td> </tr> </tbody> </テーブル> <h2>合計金額: {{totalPrice | showPrice}}</h2> </div> <h2 v-else>ショッピングカートは空です</h2> </div> <script src="/js/vue.js"></script> <script src="/js/index.js"></script> </本文> </html> CSSコード * { マージン: 0; パディング: 0; } テーブル { マージン: 100px 0 0 100px; 境界線: 1px 実線 #e9e9e9; 境界線の折りたたみ: 折りたたみ; 境界線の間隔: 0; } 番目、 td { パディング: 8px 16px; 境界線: 1px 実線 #e9e9e9; テキスト配置: 左; } 番目 { 背景色: #f7f7f7; 色: 黒; フォントの太さ: 6000 ; } h2 { 幅: 500ピクセル; 左マージン: 100px; } ボタン { パディング: 5px; } js コード (Vue) constアプリ = 新しいVue({ el:"#アプリ", データ:{ 書籍: { id:1, 名前:「アルゴリズム入門」 日付:'2019-2'、 価格:85.00、 カウント:1 }, { id:2, 名前:「コンピュータの基礎」 日付:'2019-2'、 価格:95.00、 カウント:1 }, { id:3, 名前:'C++ 上級言語'、 日付:'2019-2'、 価格:89.00、 カウント:1 }, { id:4, 名前:'《コンパイル原則》', 日付:'2019-2'、 価格:77.00、 カウント:1 }, ] }, 方法:{ 減算(インデックス){ this.books[index].count-- }, 増分(インデックス){ this.books[インデックス].count++ }, ハンドルを削除します(インデックス){ this.books.splice(インデックス,1) } }, 計算:{ 合計価格(){ 最終価格を 0 にする for(let i = 0; i < this.books.length; i++){ 最終価格 += this.books[i].price * this.books[i].count } 最終価格を返す } }, フィルター: 価格を表示(価格){ '¥' + price.toFixed(2) を返す } } }) 運用結果 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: HTML テーブルタグチュートリアル (33): セルの垂直配置属性 VALIGN
目次いつ使うか構造的ブランチコードいつ使うか選択動作を完了するには、2 つの列間で要素を直感的に移動...
日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...
使用シナリオ: Alibaba Cloud を使用しており、データディスクを別途購入しました (大容...
目次序文成果を達成するコードCSSコードJSコードHTMLコードデモンストレーションのプロセス序文ク...
ウェブサイトを作成するユーザーの多くが、このような問題に遭遇すると思います。Chrome のデフォル...
目次1. proxy と Object.defineProperty の利点2. プロキシ監視オブジ...
XHTML の img タグはいわゆる自己終了タグであり、XML では完全に合法です。 XHTMLの...
最近、顧客のフッターメールボックスにクリックして送信するメール機能を追加しました。Baidu で検索...
テーブル ヘッダーの背景画像を設定します。任意の GIF または JPEG 画像ファイルを使用できま...
前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...
CSS 属性セレクターは素晴らしいです。大量のクラス名を追加することを回避し、コード内の問題を指摘す...
目次序文1. ローカルポート転送2. リモートポート転送3. 動的ポート転送(SOCKS5) 4. ...
インデックスのマージは、MySQL が最下層で提供するインテリジェントなアルゴリズムです。インデック...
バージョン番号を非表示バージョン番号は非表示になっていません。セキュリティを強化するために、バージョ...
この記事では、参考までに、シンプルなナビゲーションバーを実装するためのJavascriptの具体的な...