この記事では、参考までに、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
この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...
1. ダウンロードApacheの公式サイトhttp://httpd.apache.org/にアクセス...
下の図は、当社のウェブサイト統計システムの訪問者詳細におけるブラウザ閲覧率を示しており、IE6 が ...
目次1. ReactJS の紹介2. ReactJSの理解とReactJSの利点1. ReactJS...
mysql5.7.18のインストール時に次の問題が発生しました: プログラム入力ポイントfesetr...
目次条件付きコンパイルページレイアウト要約する条件付きコンパイル条件付きコンパイルでは、特別なコメン...
問題コードuseEffectによって発生したクロージャの問題コードを見てみましょう 定数 btn =...
他の人のために解決した問題を記録します。問題の説明MySQLのバージョンは5.7、オペレーティングシ...
目次1. Docker Compose とは何ですか? 2. Docker Composeのインスト...
今日は、さまざまなブラウザでのデフォルト要素のマージン値が何であるかという問題について説明しました。...
MySQL のインストール時にいくつかの問題が発生しました。オンラインで見つけた回答は似たようなもの...
目次1. JavaScriptはページ内のすべてのHTML要素を変更できる1. IDでHTML要素を...
この記事は、透明度を変えてカルーセルにするXiaomiカルーセルを真似て書いたものです。初心者なので...
htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...
目次序文以前のバージョンイテレータパターンイテレータファクトリ関数イテレータプロトコル最後に序文多く...